js验证身份证是否合法,vue+element表单验证

在使用element+vue的时候用到表单的身份证验证是否合法性,发现这个挺简单的并没那么麻烦,希望对你有帮助

  var validateCard = (rule, value, callback) => {
      if (value === "") {
        callback();
        return;
      } else {           
        if (!this.IdentityCodeValid(value)) {
          callback(new Error("请输入正确的身份证号码"));
        } else {
          callback();
        }
      }

//身份证号合法性验证
//支持15位和18位身份证号
//支持地址编码、出生日期、校验位验证

methods:{
IdentityCodeValid(code) { //验证身份证合法性
      var city={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:"国外 "};
      var tip = "";
      var pass= true;
      
      var patt1=new RegExp("(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{2}$)");
      if(!code || !patt1.test(code)){
          tip = "身份证号格式错误";
          pass = false;
      } else if(!city[code.substr(0,2)]){
          tip = "地址编码错误";
          pass = false;
      }else{
          //18位身份证需要验证最后一位校验位
          if(code.length == 18){
              code = code.split('');
              //∑(ai×Wi)(mod 11)
              //加权因子
              var factor = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ];
              //校验位
              var parity = [ 1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2 ];
              var sum = 0;
              var ai = 0;
              var wi = 0;
              for (var i = 0; i < 17; i++)
              {
                  ai = code[i];
                  wi = factor[i];
                  sum += ai * wi;
              }
              var last = parity[sum % 11];
              if(parity[sum % 11] != code[17]){
                  tip = "校验位错误";
                  pass =false;
              }
          }
      }
      if(!pass) 
      this.$message({
          message: tip,
          type: "error",
          duration: 2000
        });;
      return pass;
  }
}

好了,实现了吧,加油!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 使用 Element Plus 进行表单验证可以按照以下步骤进行: 1. 安装 Element Plus 和 VeeValidate ``` npm install element-plus vee-validate@next ``` 2. 在 main.js 引入 Element Plus 和 VeeValidate ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { defineRule, ErrorMessage, configure } from 'vee-validate' import { required, min, max, email } from '@vee-validate/rules' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 注册 VeeValidate 规则 defineRule('required', required) defineRule('min', min) defineRule('max', max) defineRule('email', email) // 配置 VeeValidate configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, min: `${field}至少为${rule.params.min}个字符`, max: `${field}不能超过${rule.params.max}个字符`, email: `${field}必须是有效的邮箱地址` } return messages[rule.name] || `${field}无效` } }) app.component('ErrorMessage', ErrorMessage) app.mount('#app') ``` 3. 在组件使用 VeeValidate ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> <error-message name="username"></error-message> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> <error-message name="password"></error-message> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { defineComponent } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default defineComponent({ setup() { const { handleSubmit, resetForm, errors, setErrors } = useVeeValidate() const form = { username: '', password: '' } const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 16, message: '用户名长度在 6 到 16 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' } ] } const submitForm = handleSubmit(async () => { // 提交表单逻辑 }) return { form, rules, submitForm, resetForm, errors, setErrors } } }) </script> ``` 在这个例子,我们使用了 `useVeeValidate()` hook 来管理表单验证,定义了一个 `form` 对象来存储表单数据,定义了 `rules` 对象来定义表单验证规则,使用了 `handleSubmit()` 方法来触发表单提交逻辑,并且使用了 `ErrorMessage` 组件来展示错误信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值