vue表单验证填写判断身份证自动写入年龄性别和出生年月日

最新推荐文章于 2024-10-28 15:47:26 发布

小董大咖

最新推荐文章于 2024-10-28 15:47:26 发布

阅读量623

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/ddf__/article/details/128436871

版权

判断身份证
我用的是表单验证
在你验证的下方写入就跟我这样差不多这是一个正则表达式

 const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
    id_card: [
      {
        required: true,
        message: '请输入身份证号码',
        trigger: 'change',
      },
      { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' },
    ],
  tele: [
      {
        required: true,
        message: '请输入手机号',
        trigger: 'change',
      },
      {
        pattern:
          /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/,
        message: '你的手机格式不对',
      },
    ],

而写入身份证自动写入年龄性别和出生年月日

这就需要 watch

watch(ruleForm, (newName, oldName) => {
    var numid = newName.id_card.split('');
    if (numid.length == 18) {
      var sex = newName.id_card.substring(16, 17);
      ruleForm.sex = sex % 2 == 1 ? '男' : '女';
      var bir = newName.id_card.substr(6, 8);
      ruleForm.born = bir.replace(/(.{4})(.{2})/, '$1-$2-');
      let myDate = new Date();
      ruleForm.age = myDate.getFullYear() - newName.id_card.substring(6, 10);
    } else {
      ruleForm.sex = '';
      ruleForm.born = '';
      ruleForm.age = '';
    }
  });

这就可以了效果如下