常用正则配合ElementUI表单校验

1.根据证件类型选择性校验

data() {
  // 身份证校验
  const checkIDCard = (rule, value, callback) => {
    const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
    if (value) {
      if (IDCardReg.test(value)) {
        callback()
      } else {
        callback(new Error('身份证号格式不正确'))
      }
    } else {
      callback(new Error('请输入身份证号'))
    }
  }
  // 港澳通行证校验
  const checkHKCard = (rule, value, callback) => {
    /**
     * 规则： H/M + 10位或6位数字
     * 样本： H1234567890
     */
    const HKCardReg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
    if (value) {
      if (HKCardReg.test(value)) {
        callback()
      } else {
        callback(new Error('港澳通行证号格式不正确'))
      }
    } else {
      callback(new Error('请输入港澳通行证号'))
    }
  }
  // 台湾通行证校验
  const checkTWCard = (rule, value, callback) => {
    const TWCardReg1 = /^[0-9]{8}$/;
    const TWCardReg2 = /^[0-9]{10}$/;
    if (value) {
      if (TWCardReg1.test(value) || TWCardReg2.test(value)) {
        callback()
      } else {
        callback(new Error('台湾通行证号格式不正确'))
      }
    } else {
      callback(new Error('请输入台湾通行证号'))
    }
  }
  // 护照校验
  const checkPassport = (rule, value, callback) => {
    const passportReg1 = /^[a-zA-Z]{5,17}$/;
    const passportReg2 = /^[a-zA-Z0-9]{5,17}$/;
    if (value) {
      if (passportReg1.test(value) || passportReg2.test(value)) {
        callback()
      } else {
        callback(new Error('护照号码格式不正确'))
      }
    } else {
      callback(new Error('请输入护照号码'))
    }
  }
  return{
     // 把正则放在这里方便底下method切换正则
     checkIDCard: checkIDCard,
     checkHKCard: checkHKCard,
     checkTWCard: checkTWCard,
     checkPassport: checkPassport,
  }
}
methods: {
  // 用户校验切换证件类型，验证身份证、港澳通行证、台湾通行证、护照 校验
  handleCardChange() {
    if (this.user.credentialType == 1) {
      this.rules.credentialNumber = [{ required: true, validator: this.checkIDCard, trigger: 'change' }]
    } else if (this.user.credentialType == 2) {
      this.rules.credentialNumber = [{ required: true, validator: this.checkHKCard, trigger: 'change' }]
    } else if (this.user.credentialType == 3) {
      this.rules.credentialNumber = [{ required: true, validator: this.checkTWCard, trigger: 'change' }]
    } else if (this.user.credentialType == 4) {
      this.rules.credentialNumber = [{ required: true, validator: this.checkPassport, trigger: 'change' }]
    } else {
      this.rules.credentialNumber = [{ required: true, message: '请先选择证件类型', trigger: 'change' }]
    }
  }
}

HTML部分：

<el-form-item label="证件类型:" prop="credentialType" label-width="85px" style="margin-left: -5px; margin-right: 15px">
  <!-- 绑定Change事件 -->
  <el-select v-model="user.credentialType"  class="ext_inp5" @change="handleCardChange">
    <el-option
      v-for="(dict,key) in credentialTypeOptions"
      :label="dict.dictLabel"
      :value="dict.dictValue"
      :key="key"
    />
  </el-select>
</el-form-item>

<el-form-item label="证件号:" prop="credentialNumber">
  <el-input v-model="user.credentialNumber" class="ext_inp2"></el-input>
</el-form-item>

2.手机号

const checkMobile = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('手机号不能为空'));
  } else {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
    if (reg.test(value)) {
      callback();
    } else {
      return callback(new Error('请输入正确的手机号'));
    }
  }
};

3.正数带小数

// 身高体重
const heightWeight = (rule, value, callback) => {
  const Reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
  if (value) {
    if (Reg.test(value)) {
      callback();
    } else {
      callback(new Error('请输入正数'))
    }
  }
}