vue el-form多規則rules驗證

當我們在使用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' }
        ]
      },
    }
  },