vue el-form多规则rules验证

Posted 2021-02-21 atomgame

当我们在使用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‘ }
        ]
      },
    }
  },