vue element-ui form 表单校验 银行卡和手机号

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="银行卡号" prop="cardNum">
    <el-input v-model="form.cardNum"></el-input>
  </el-form-item>
  <el-form-item label="手机号码" prop="phoneNum">
    <el-input v-model="form.phoneNum"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    form: {
      cardNum: '',
      phoneNum: '',
    },
    rules: {
      // 银行卡号校验规则
      cardNum: [
        { required: true, message: '请输入银行卡号', trigger: 'blur' },
        { validator: this.checkCardNum, trigger: 'blur' },
      ],
      // 手机号码校验规则
      phoneNum: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { validator: this.checkPhoneNum, trigger: 'blur' },
      ],
    },
  }
},

methods: {
  // 银行卡号校验函数
  checkCardNum(rule, value, callback) {
    var reg = /^([1-9]{1})(\d{14}|\d{18})$/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error('银行卡号格式不正确'));
    }
  },
  // 手机号码校验函数
  checkPhoneNum(rule, value, callback) {
    var reg = /^1[3456789]\d{9}$/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error('手机号码格式不正确'));
    }
  },
},

handleSubmit() { 
  this.$refs.form.validate((valid) => { 
    if (valid) { 
      console.log('form validated');
    } else { 
      console.log('form invalid');
      return false;
    }
  });
},