el-from表单自定义校验

<el-form ref="formRef" label-width="150px" :model="model" :rules="rules">
	<el-form-item
     v-for="(field, index) in formFields"
     :key="index"
     :label="field.subjectName"
     :prop="field.name"
	>
     <el-input v-model="model[field.name]" />
   </el-form-item>
 </el-form>

data种rules的值

model: {
	name: '',
},
rules:{
	name:[
		{
			required: true,
			message: '请输入姓名',
			trigger: 'blur',
		},
		{
			validator: (rule, value, callback) => {
				//在此处获取到输入值做处理
				if (!/^[0-9]\d*$/.test(value)) {
					callback(new Error('请输入正整数'))
				} else {
					callback()
				}
	        },
	        trigger: 'blur',
		}
	]
}

这样就完成了自定义校验规则，先会校验是否空值，再校验此处的自定义规则。

当表单校验规则中都存在相同的自定义规则时，可以在mounted生命周期中做处理为rules批量添加规则。

const createValidator = (regex, errorMessage) => ({
  validator: (rule, value, callback) => {
    if (!regex.test(value)) {
      callback(new Error(errorMessage));
    } else {
      callback();
    }
  },
  trigger: 'blur',
});

const commonValidator = createValidator(/^\d+(\.\d+)?$/, '请输入数字');
const positiveValidator = createValidator(/^[1-9]\d*$/, '请输入正整数');

for (let key in this.rules) {
  if (Array.isArray(this.rules[key])) {
    this.rules[key].push(commonValidator, positiveValidator);
  }
}

这样就为rules中所有的校验规则有添加了positiveValidator和commonValidator两个规则。

最后触发表单校验：

btnClick(){
	this.$refs['formRef'].validate(async (valid) => {
		if(valid){
			//这里些校验通过后的业务操作
		}
	})
},