element-ui Form表单校验小结

1.要验证输入只能为数字时

2.整体校验时，可以写方法校验；


3.根据条件判断表单里的 某一项 是否必填；
方法一：
动态响应的改变required的值；在rules里面可以不用加 requied

方法二：
直接改变当前对应项的 rules ;写对应需要的两套校验条件

<el-form class="dialog-body" :rules="rulesList" :model="temp" :model='addForm'>
	 <el-form-item label="基本法类型" prop="fundamentalLawType"  >
         <el-input   v-model="addForm.fundamentalLawType" ></el-input>
     </el-form-item>
</el-form>
 
<script>
export default {
  data() {
    return {
      rules: {
        fundamentalLawType: [
          { required: true, message: '不能为空', trigger: 'change' }
        ] 
      },
      rules2: {
        fundamentalLawType: [
          { required: false, trigger: 'change' }
        ]
      },
    }
  },
 computed: {
    rulesList: function() {
      if (this.addForm.fundamentalLawType) {
        return this.rules
      } else {
        return this.rules2
      }
    }

 </script>

4.取消部分表单字段校验结果;


5.resetFields与clearValidate方法
//根据需求二选一

 this.$refs[refElement].resetFields(); //移除校验结果并重置字段值
  this.$refs[refElement].clearValidate(); //移除校验结果

6.同时校验多个表单
方法一：

     //校验表单1
      var p1=new Promise(function(resolve, reject) { 
            this.$refs[form1].validate((valid) => {
                if(valid){
                    resolve();
                }
            })
        });
        //校验表单2
        var p2=new Promise(function(resolve, reject) {
             this.$refs[form2].validate((valid) => {
              if(valid){
                resolve();
              }
            })
        }); 
        
        Promise.all([p2,p1]).then(function(){
            alert("验证通过了");
        });

方法二：

		this.$refs[form1].validate((valid) => { 
                if (valid) {
                  this.form1= true
                }
              });
         this.$refs[form2].validate((valid) => {
                if(valid){
                   this.form2= true
                } 
            });
          if (this.form1&& this.form2) {
             alert("验证通过了")
           } 

7.校验的几个方法