正则验证-手机号验证和身份证验证

前端表单中用到手机号和身份证，用正则简单的验证输入的手机号和身份证号是否正确，用的VUE+ElementUI框架。

在<template>里，需要重点注意的：用prop="phone"和prop="idCard"来传值

<template>
    <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="80px"
    label-position="right"
    >
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" placeholder="手机号码" />
        </el-form-item>
        <el-form-item label="证件号码" prop="idCard">
          <el-input v-model="form.idCard" placeholder="证件号码" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
<template>

在return中写好对应的数据，注意这里用rules，要和下文中data()中的传值保持一致

data() {
    return {
    form: {
      idCard: '',
      phone: ''
    },
    rules: {
      idCard: [{ required: true, trigger: 'blur',validator: validateId }],
      phone: [{ required: true, trigger: 'blur', validator: validatePhone}]
    }
  }
}

在methods中：写以下两个方法，方法的作用是检查输入的数据是否正确

methods: {
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    //检查身份证
    isCard(str) {
      if(!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str)){
        return false;
      } else {
        return true;
      }
    }

在data()中，写两个检查，三个作用。1:必填。没填时提示。2:是否满足条件（这个需要调用上面说到的方法），不满足条件时提示。 3:正确时退出这个函数（这个我也不确定，猜测的）

data() {
  const validatePhone = (rules,value,callback) => {
    if (value === '') {
      callback(new Error('手机号不能为空'))
    } else if (!this.isCellPhone(value)) {
      callback(new Error('手机号格式错误'))
    } else {
      callback();
    }
  };
  const validateId = (rules,value,callback) => {
    if (value === '') {
      callback(new Error('证件号码不能为空'))
    } else if (!this.isCard(value)) {
      callback(new Error('证件号格式错误'))
    } else {
      callback();
    }
   };
}