element-ui 表单校验

一：最普通的验证

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>

js

export default {
  data() {
    return {
      ruleForm: {
        name: null
      },
      rules: {
        name: [
          {
            required: true,
            message: "名称为必填项！",
            trigger: "blur",
          },
        ]
      },
    };
  },

二：自定义的基本验证

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>

js

export default {
  data() {
    return {
      ruleForm: {
        name: null
      },
      rules: {
        name: [
          {
            required: true,
            validator: this.name,
            trigger: "blur",
          },
        ]
       }
      }
    },
    methods: {
	     name(rule, value, callback) {
		      if (!value) {
		        callback(new Error("名称为必填项！"));
		        //这里你可以做任何你想加的验证，包括正则
		      } else {
		       //注意，别丢了 callback();
		       callback();
		      }
	    },
    }
  };

三：自定义的动态（可动态添加删除表单）验证

HTML

<el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
   <div
      :key="key"
      v-for="(list , key) in ruleForm.nameList"
    >
	    <el-form-item label="名称：" 
	    :prop="'nameList.'+ key +'.name'"
	    :rules="rules.name"
	    >
	      <el-input
	        v-model="list .name"
	      ></el-input>
	    </el-form-item>
    </div>
</el-form>

js

export default {
  data() {
    return {
      ruleForm: {
        nameList:[
        	{
        	name:null
        	}
        ]
      },
      rules: {
        name: [
          {
            required: true,
            //此处可以使用基本验证以及自定义验证
            // message: "名称为必填项！",
            validator: this.name,
            trigger: "blur",
          },
        ]
       }
      }
    },
    methods: {
	     name(rule, value, callback) {
		      if (!value) {
		        callback(new Error("名称为必填项！"));
		        //这里你可以做任何你想加的验证，包括正则
		      } else {
		       //注意，别丢了 callback();
		       callback();
		      }
	    },
    }
  };

四：是否必填取决于另外一个场景的验证

HTML

<el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
   <el-form-item label="年龄："  prop="age" >
	   <el-input
	     v-model="ruleForm.age"
	   ></el-input>
   </el-form-item>
   <el-form-item label="名称："  prop="name"
     :rules="ruleForm.age==1?[{ required: true, validator: this.Yname, trigger: 'blur' }]:[{ required: false, validator: this.Nname, trigger: 'blur' }]"
    >
	  <el-input
	    v-model="ruleForm.name"
	  ></el-input>
  </el-form-item>
</el-form>

js

export default {
  data() {
    return {
      ruleForm: {
       	name:null,
       	age:null,
      },
      }
    },
    methods: {
	     Yname(rule, value, callback) {
		      if (!value) {
		        callback(new Error("名称为必填项！"));
		        //这里你可以做任何你想加的验证，包括正则
		      } else {
		       //注意，别丢了 callback();
		       callback();
		      }
	    },
	     Nname(rule, value, callback) {
		      if (value) {
		        callback(new Error("当填写了数据时，需要的验证"));
		        //这里你可以做任何你想加的验证，包括正则
		      } else {
		       //注意，别丢了 callback();
		       callback();
		      }
	    },
    }
  };

五：强制触发验证&清除所有验证

//强制触发某个验证
//例如：this.$refs.ruleForm.validateField("name");
this.$refs.ruleForm.validateField("需要验证的表单的prop传的串");

//强制触发所有验证
this.$refs.ruleForm.validate();

//清除所有验证
this.$refs.ruleForm.resetFields();

//清除某个表单的验证
//例如：this.$refs.ruleForm.validateField("name");
this.$refs.ruleForm.clearValidate("需要移除的表单的prop传的串");