<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>

vue2.X+elementUI表單自定義驗證