Introduction to the custom verification rules for vue form

<div >
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
 <el-form-item label="password" prop="pass">
  <el-input type="password" v-model="" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="Confirm Password" prop="checkPass">
  <el-input type="password" v-model="" auto-complete="off"></el-input>
 </el-form-item>
 <el-form-item label="age" prop="age">
  <el-input =""></el-input>
 </el-form-item>
 <el-form-item>
  <el-button type="primary" @click="submitForm('ruleForm2')">submit</el-button>
  <el-button @click="resetForm('ruleForm2')">Reset</el-button>
 </el-form-item>
</el-form>
</div>

var Main = {
  data() {
   var checkAge = (rule, value, callback) => {
    if (!value) {
     return callback(new Error('Age cannot be empty'));
    }
    setTimeout(() => {
     if (!(value)) {
      callback(new Error('Please enter a numeric value'));
     } else {
      if (value < 18) {
       callback(new Error('must be at least 18 years old'));
      } else {
       callback();
      }
     }
    }, 1000);
   };
   var validatePass = (rule, value, callback) => {
    if (value === '') {
     callback(new Error('Please enter your password'));
    } else {
     if (this. !== '') {
      this.$refs.('checkPass');
     }
     callback();
    }
   };
   var validatePass2 = (rule, value, callback) => {
    if (value === '') {
     callback(new Error('Please enter your password again'));
    } else if (value !== this.) {
     callback(new Error('The password is inconsistent when two times are entered!'));
    } else {
     callback();
    }
   };
   return {
    ruleForm2: {
     pass: '',
     checkPass: '',
     age: ''
    },
    rules2: {
     pass: [
      { validator: validatePass, trigger: 'blur' }
     ],
     checkPass: [
      { validator: validatePass2, trigger: 'blur' }
     ],
     age: [
      { validator: checkAge, trigger: 'blur' }
     ]
    }
   };
  },
  methods: {
   submitForm(formName) {
    this.$refs[formName].validate((valid) => {
     if (valid) {
      alert('submit!');
     } else {
      ('error submit!!');
      return false;
     }
    });
   },
   resetForm(formName) {
    this.$refs[formName].resetFields();
   }
  }
 }
var Ctor = (Main)
new Ctor().$mount('#app')

<template>
 <div class="taxi-appointment-dairen">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
   <div class="dairen-input">
    <el-form-item>
     <el-input
      v-model=""
      placeholder="Please enter the passenger's name (optional)">
     </el-input>
    </el-form-item>
    <i class="fa fa-user fa-2x"></i>
   </div>
   <div class="dairen-input">
    <el-form-item prop="number">
     <el-input
      v-model=""
      placeholder="Please enter the passenger's mobile number">
     </el-input>
    </el-form-item>
    <i class="fa fa-mobile-phone fa-2x"></i>
   </div>
   <div class="popover-btn">
    <el-button @click="submitForm('ruleForm')" type="primary">Sure</el-button>
   </div>
  </el-form>
 </div>
</template>

<script>
 export default {
  data () {
   var ruleNumber = (rule, value, callback) => {
    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (value === '') {
     callback(new Error('Please enter the passenger's mobile number'));
    } else if(!(value)) {
     callback(new Error('Please enter the correct mobile phone number of the passenger'));
    }else {
     callback();  //The key point is this. If the callback() function is not added after verification, the condition will be false when verification is validated.    }
   };
   return {
    ruleForm: {
     name: '',
     number: ''
    },
    rules: {
     number: [{ validator: ruleNumber, trigger: 'blur' }]
    }
   }
  },
  methods: {
   submitForm (formName) {
    this.$refs[formName].validate((valid) => {
     if (valid) {   //This step cannot be made when the verification is passed.      (valid)
     } else {
      return false
     }
    });
   }
  }
 }
</script>