vue表单不同条件不同的验证规则，vue el-form多规则rules验证

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

el-form

打开边栏(ESC) 关闭边栏(ESC)

当我们在使用vue el-form的时候，经常会根据传入的值来动态验证表单信息，比如新建，编辑表单，不同的情况下，需要的验证方式不一样。根据这样的需求，我们有两种方法解决：

1.在data()中定义两个rule规则,用computed根据值动态验证。

<el-form class="dialog-body" :rules="rulesList" :model="temp">
<!--这里为表单内容-->
</el-form>
 
<script>
export default {
  data() {
    return {
      rules: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        accno: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        accname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        otp: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        otp_id: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      rules2: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
    }
  },
computed: {
    rulesList: function() {
      if (this.temp.pay_type) {
        return this.rules
      } else {
        return this.rules2
      }
    }
  },

2.在data()中定义多个rule规则，用三元表达式来判断当前需要的规则。

<el-form class="dialog-body" ref="from" :rules="!form.id ? 'rules' : 'rules2'" :model="temp">
<!--这里为表单内容-->
</el-form>
 
<script>
export default {
  data() {
    return {
      rules: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      rules2: {
        pay_type: [
          { required: true, message: '不能为空', trigger: 'change' }
        ]
      },
    }
  },

赏