el-form的几种校验方式

一、data中

  rules: {
   name: [
  { required: true, message: "请输入活动名称", trigger: "blur" },
    
          ],
 },

二、validator

   rules: {
        name: [
       
            { max_age: 18, validator: checkAge, trigger: "blur" },
      ],
   },

var checkAge = (rule, value, callback) => {
 if (!value) {
    return callback(new Error("年龄不能为空"));
  }
  if (value > rule.max_age) {
    return callback(new Error("年龄不能大于最大年龄"));
 }
  return callback();
 };

三、循环

<el-form-item :label="'活动名称' + (index+1)" :prop="`domains.${index}.value`" v-for="(item,index) in ruleForm.domains" :key='index' :rules="[{validator:checkdomain,trigger:'blur'}]">
        <el-input v-model="item.value"></el-input>
      </el-form-item>


 ruleForm: {
        domains: [{ value: "" }, { value: "" }, { value: "" }],
      },


checkdomain(rule, value, callback) {
      if (!value) {
        return callback(new Error("不能为空"));
      }
      if (value.length < 10) {
        return callback(new Error("不能小于10个字符"));
      }
      return callback();
    },

四、行内

<el-form-item label="年龄" prop='age' :rules="[
      {
          required:true,message:'年龄不能为空'
      },{
validator:check,trigger:'blur'
      }
      ]">
        <el-input v-model='ruleForm.age' />
      </el-form-item>

methods:{

 // check(rule, value, callback) {
    //   if (!value) {
    //     return callback(new Error("不能为空"));
    //   }
    //   if (value < 12) {
    //     return callback(new Error("不能小于12岁"));
    //   }
    // },
}