Element UI Form form custom validation detailed explanation

The front-end must use form forms for data transmission. In order to optimize the user experience and obtain accurate types of data, front-end verification is required. This article analyzes the custom verification of the Element UI form, analyzing it in detail with age verification and password verification. , the main custom rules are: verify whether the form is empty, enter the age to verify that the age can only be a numerical value, the verification age must be greater than 18 years old, the verification password cannot be empty, and finally submit and reset the form

Take a look at the renderings first-----before verification:

 Click submit when the form is empty. The verification form cannot be empty. The verification rules prompt the user.

 If the age is less than 18 years old, the user will be prompted if there is an error in verification.

Enter the correct age and the verification passes without prompting.

 Next is the code:

 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input v-model="ruleForm.pass" maxlenght></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>



  <script>
      data() {
      //自定义的验证规则，三个参数验证规则，验证的值，回调（返回验证信息）
      var checkAge = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var passWord = (rule,value,cb)=>{
        console.log('if前',value)
        if(value === ''){
          return cb(new Error('请输入密码'));
        }else{
          setTimeout(() => {
            if(value = ''){
            value? cb(console.log(value)): cb(new Error('成功！！！'))
            }else{
              cb('失败！！！')
            }
            
        }, 2000);
        }
        
      }
      return {
      //表单验证的内容，在form中使用 :model进行绑定
        ruleForm: {
          age: '',
          pass:''
        },
     //验证规则，在form中使用 :rules进行绑定
        rules: {
     //在form中使用porp绑定，代表验证的哪一项的值，进行匹配
          age: [
            { validator: checkAge, trigger: 'blur' }
          ],
          pass:[
            {validator:passWord,trigger:'blur'}
          ]
        }
      };
    },
    methods: {
    //提交按钮方法，验证通过执行
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            //表单验证通过后可在此处进行其他操作
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    //重置方法，点击重置清空表单内信息及错误提示
      resetForm(ruleForm) {
        this.$refs[ruleForm].resetFields();
      }
    }
  })
  </script>