element-ui--表单校验

el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。

1.实现对一个表单进行两套或以上的验证

花了一点时间摸索，我想：如果不像官方给的那样，rules="rules"，然后在data下设置rules的值，而是把rules绑定一个函数，这个函数在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' }
        ],
      },
      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() {
    const validatePass = (rule, value, callback) => {
      if (this.option) {
        callback(new Error('请选择列表中已有的选项'))
      } else {
        callback()
      }
    }
    return {
        rules: {
            firstContract: [
              { required: true, message: '不能为空', trigger: ['blur', 'change'] },
              { required: true, trigger: 'blur', validator: validatePass }
            ],
        }
    }
}

element-ui--表单校验

相关推荐