關於form中的rules對變量設置多個校驗規則，執行順序

實現效果：

 

 

 如上所示，對活動名稱設置了三個校驗規則，分別為必填項，長度為3~4個字符，需要為數字/英文字母。

 

代碼如下：

1.html：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

2.js：

var validateCode = (rule, value, callback) => {
  const age= /^[0-9a-zA-Z]+$/;
  if (value && !age.test(value)) {
    callback(new Error('格式不正確，需要為數字或是英文字母'));
  }else{
    callback();
  }
};

rules: {
  name: [
    { min: 3, max: 4, message: '長度在 3 到 4 個字符', trigger: ['blur', 'change'] },
    { validator: validateCode, trigger: ['blur', 'change'] },
    { required: true, message: '請輸入活動名稱', trigger: 'blur' },
  ]
},

在rules中對name設置了校驗規則，共有三個，按順序：長度在3到4個字符，滿足需要數字或是英文字母，必填。

 

實際執行順序：

1.先判斷是否對它設置了必填，若是設置了為必填項，則先做該條規則校驗，不管該條規則順序排在第幾位；

2.接下來若是在輸入框中填寫了數據，則按照下面的規則順序進行一個個校驗，均滿足條件才可通過。

3.若是設置了為非必填，則不填可以通過，若是填寫的話，還是按照編寫的規則順序一個個校驗，均滿足條件才可通過。

 

補充：

1.通過require值設置為true/false，來區分設置為必填還是非必填，設置了require為true的該條校驗規則永遠是最先執行。