elementui中el-form自定义表单校验规则

1. 完整代码

在rules中，加validator字段，定义自己的校验规则，为一个函数，必须调用callback(无论校验是否成功，调用callback函数)

<template>
  <div class="addAccount">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="auto"
          >
            <el-form-item label="中台UID" prop="uid">
              <el-input
                type="textarea"
                v-model="ruleForm.uid"
                style="width: 600px"
                :rows="3"
                placeholder="请输入中台uid"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" size="small" @click="toAddPlenty('ruleForm')"
                >批量创建工单</el-button
              >
            </el-form-item>
          </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        uid: "",
      },
      rules: {
        uid: [
          {
            // 表单校验之后，不显示星号——必须加required：true才可以
            required: true,
            validator: (rule, value, callback) => {
              const ipReg = /^(\d+((,\d+)*)),?$/;
              const error = value.length && value.split(',').some(ip => ip && !ipReg.test(ip))

              if (value === "") {
                callback(new Error('请输入中台uid，多个uid用英文","分隔'));
              } else {
                if (error) {
                  callback('请输入正确的uid，多个uid用英文","分隔')
                }
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    toAddPlenty(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("输入格式正确!");
        } else {
          console.log("error !!");
          return false;
        }
      });
    },
  },
};
</script>

2. 相关问题解释

1. 校验规则给el-form加rules属性，对应值在data中返回，为一个对象。
2. rules对象的各个键为el-form-item中的prop对应字段名，例如：

<el-form :model="form" :rules="rules" ref="ruleForm">
	<el-form-item prop="id">
		<el-input v-model="form.id"></el-input>
	</el-form-item>
</el-form>

data(){
	return {
		rules: {
			id: [{
				required: true,
				validator: (rule,value,callback)=>{},
				trigger:"blur"
			}]
		}
	}
}

3. validate函数在任意一表单项被校验后触发
   例如以上写的当触发blur事件，会触发validate函数，校验表单的prop值，代码如下：

// 这里refs取 el-form , 参数valid为true则校验成功 为false则失败，需重新输入相关表单内容
this.$refs['ruleForm'].validate((valid)=>{})

3. 表单校验生效之后不显示label前的小星号问题

在自定义校验规则中，加上required: true，不加就不会显示label前面的红色星号。