<div id="app"><el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密碼" prop="pass">  <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="確認密碼" prop="checkPass">  <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input> </el-form-item> <el-form-item label="年齡" prop="age">  <el-input v-model.number="ruleForm2.age"></el-input> </el-form-item> <el-form-item>  <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>  <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item></el-form></div>

var Main = {  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 validatePass = (rule, value, callback) => {    if (value === '') {     callback(new Error('請輸入密碼'));    } else {     if (this.ruleForm2.checkPass !== '') {      this.$refs.ruleForm2.validateField('checkPass');     }     callback();    }   };   var validatePass2 = (rule, value, callback) => {    if (value === '') {     callback(new Error('請再次輸入密碼'));    } else if (value !== this.ruleForm2.pass) {     callback(new Error('兩次輸入密碼不一致!'));    } 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 {      console.log('error submit!!');      return false;     }    });   },   resetForm(formName) {    this.$refs[formName].resetFields();   }  } }var Ctor = Vue.extend(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="ruleForm.name"      placeholder="請輸入乘車人姓名（選填）">     </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="ruleForm.number"      placeholder="請輸入乘車人手機號碼">     </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">確定</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('請輸入乘車人手機號碼'));    } else if(!myreg.test(value)) {     callback(new Error('請輸入正確乘車人手機號碼'));    }else {     callback();  //重點在這 如果在驗證通過后不添加callback()函數在驗證時是條件會為false    }   };   return {    ruleForm: {     name: '',     number: ''    },    rules: {     number: [{ validator: ruleNumber, trigger: 'blur' }]    }   }  },  methods: {   submitForm (formName) {    this.$refs[formName].validate((valid) => {     if (valid) {   //在驗證通過時時不返回callback()時 這一步進不來      console.log(valid)     } else {      return false     }    });   }  } }</script>