关于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的该条校验规则永远是最先执行。