vue2配合element UI中身份证号的校验和脱敏

身份证号校验(包含长度 特殊字符 区号 出生日期等多个校验)

 validator: (rule, value, callback) => {
            const arrVerifyCode = [1, 0, "x", 9, 8, 7, 6, 5, 4, 3, 2];
            const Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            if (value.length != 15 && value.length != 18) {
              return callback(new Error('长度格式有误'))
            }
            let Ai = value.length == 18 ? value.substring(0, 17) : value.slice(0, 6) + "19" + value.slice(6, 16)
            if (!/^\d+$/.test(Ai)) {  //排除特殊字符X
              return callback(new Error('格式有误'))
            }
            const yyyy = Ai.slice(6, 10), mm = Ai.slice(10, 12) - 1, dd = Ai.slice(12, 14)
            const d = new Date(yyyy, mm, dd), now = new Date()
            const year = d.getFullYear(), mon = d.getMonth(), day = d.getDate()
            if (year != yyyy || mon != mm || day != dd || d > now || year < 1940) {
              return callback(new Error('出生日期有误'))
            }
            let ret = 0
            for (let i = 0; i < 17; i++) ret += Ai.charAt(i) * Wi[i]
            Ai += arrVerifyCode[ret %= 11]
            return value.length == 18 && value != Ai ? callback(new Error('身份证号不合规')) : callback()
          } 

表格中身份证号脱敏展示

 <el-table-column prop="AC_CODE" label="身份证号" width="200" show-overflow-tooltip>
      <template slot-scope="scope">
        {{scope.row.AC_CODE? scope.row.AC_CODE.replace(/^(.{6})(?:\w+)(.{4})$/,
"\$1******\$2"):""}}
      </template>
 </el-table-column>

 

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 Element UI 来说,要校验身份证号码可以使用自定义校验规则或者使用内置的校验规则。下面是使用自定义校验规则的示例代码: 首先,导入 Element UIVue: ```html <script src="https://unpkg.com/vue/dist/vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> ``` 然后,在 Vue 实例定义一个自定义校验方法,并将其作为校验规则添加到表单项: ```html <template> <el-form :model="form" label-width="120px"> <el-form-item label="身份证号码" prop="idNumber" :rules="idNumberRules"> <el-input v-model="form.idNumber"></el-input> </el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { form: { idNumber: '' }, idNumberRules: [ { validator: this.validateIdNumber, trigger: 'blur' } ] }; }, methods: { validateIdNumber(rule, value, callback) { if (!value) { callback(new Error('身份证号码不能为空')); } else if (!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/.test(value)) { callback(new Error('请输入正确的身份证号码')); } else { callback(); } }, submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过,可以进行提交操作 console.log('表单校验通过'); } else { console.log('表单校验不通过'); } }); } } }; </script> ``` 这样就能实现对身份证号码的校验了。当输入的身份证号码不符合规则时,表单项会显示错误提示信息,并且提交按钮会被禁用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值