el-form表单验证身份证合法性和手机号格式_form表单手机号校验-优快云博客

一、需求：身份证号：根据身份证编码规则在表单输入框添加校验，手机号：验证基本格式。

1、验证form表单身份证合法性和手机号格式，页面效果如下
在这里插入图片描述

2、身份证编码规则

排列顺序从左至右依次为:六位数字地址码，八位数字出生日期码，三位数字顺序码和一位校验码。其含义如下:第1至6位为地址码，表示这个人常住户口所在的行政区划代码，顺序为省(直辖市，自治区，特别行政区)、地级市、县，分别2位数；第7至14位是出生日期码，表示出生的年、月、日，年、月、日分别用4位、2位(不足两位加0)、2(同上)位数字表示。第15至17位是顺序码:表示在同一地址码所表示的范围内，对同年、同月、同日出生的人编定的顺序号，顺序码的奇数分配给男性，偶数分配给女性。最后一位是校验码，通过前17位数字根据一定计算得出。

3、实现方法,具体注释在代码里

<template>
  <div>
<!--    表单-->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="ruleForm.idCard" maxlength="18"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitBtn" round class="currency-btn">验证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    // 身份证验证
    var validatorIdCard = (rule, value, callback) => {
    // 地区
      var aCity={ 11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",
        21:"辽宁",22:"吉林",23:"黑龙江",
        31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",
        41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",
        51:"四川",52:"贵州",53:"云南",54:"西藏",
        61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",
        71:"台湾",81:"香港",82:"澳门",91:"国外"};
        // 验证长度
      if(!/^\d{17}(\d|x)$/i.test(value)){
        callback(new Error('您输入的身份证号长度或格式错误，请输入正确的身份证号'));
        return;
      }
      // 验证前两位是否为省份代码
      value=value.replace(/x$/i,"a");
      if(aCity[parseInt(value.substr(0,2))]==null){
        callback(new Error('您输入的身份证号长度或格式错误，请输入正确的身份证号'));
        return;
      }
      // 身份证上的出生年月校验
      var sBirthday=value.substr(6,4)+"-"+Number(value.substr(10,2))+"-"+Number(value.substr(12,2));
      var d=new Date(sBirthday.replace(/-/g,"/")) ;
      if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){
        callback(new Error('您输入的身份证号不合法，请输入正确的身份证号'));
        return;
      }
      // 身份证校验位判断
      var iSum=0 ;
      for(var i=17;i>=0;i--) {
        iSum += (Math.pow(2,i) % 11) * parseInt(value.charAt(17 - i),11) ;
      }
      if(iSum%11!=1){
        callback(new Error('您输入的身份证号不合法，请输入正确的身份证号'));
        return;
      }
      callback()
    };
    return {
      ruleForm:{},
      rules:{
        idCard: [
          { required: true, validator: validatorIdCard, trigger: 'blur' },
        ],
        phone: [
        //非空验证
          { required: true, message: '请输入手机号', trigger: 'blur' },
        // 手机号格式
          {
            required: true,
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          },
        ],
      }
    };
  },
  methods: {
  //表单提交方法
    submitBtn() {
      this.$refs.ruleForm.validate((valid) =>{
        if(valid) {
        console.log('验证通过')
        }
      })
    },
  },
}
</script>

<style scoped>
.demo-ruleForm {
  margin: 50px auto;
  width: 50%;
}
.currency-btn{
  padding: 10px 60px !important;
  box-shadow: 0 5px 9px 0 rgba(245,67,118,0.3) !important;
}
</style>