vue2.X+elementUI表单自定义验证

Posted 2020-10-30 进军码农

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