vue3+ts纯前端校验身份证号码是否真实+必填校验

vue3+ts纯前端校验身份证号码是否真实存在+必填校验

//form表单绑定rules校验

<u-form ref="formRef" :model="form" :rules="rules">
               <u-form-item label="身份证件号码:" required prop="certificateNumber">
                        <u-input v-model="form.certificateNumber" placeholder="请输入身份证号" />
                    </u-form-item>

</u-form>

//rules校验规则  
 const rules = reactive({
        certificateNo: [{ required: true, message: '请输入身份证号码', trigger: ['blur'] }, {
            validator: (rule, value, callback) => {
                // 在这里确保传递了证件号码作为参数给 visitCertCodetip 方法
                const isValid = visitCertCodetip(value); // 确保 value 是证件号码
                if (!isValid) {
                    callback(new Error('请输入正确的身份证号'));
                } else {
                    callback();
                }
            },
            trigger: 'blur'
        }],
    })

    //身份证号码校验
    const visitCertCodetip = (code : any) => {
        //身份证号前两位代表区域
        const 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: '国外 '
        }
        //身份证格式正则表达式
        const idCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
        //如果身份证不满足格式正则表达式
        if (!code || !idCardReg.test(code)) {
            return false
        }

        //区域数组中不包含需验证的身份证前两位
        else if (!city[code.substr(0, 2)]) {
            return false
        } else {
            //18位身份证需要验证最后一位校验位
            if (code.length == 18) {
                code = code.split('')
                //∑(ai×Wi)(mod 11)
                //加权因子
                const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
                //校验位
                const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
                let sum = 0
                let ai = 0
                let wi = 0
                for (let 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]) {
                    return false
                }
            }
        }
        return true
    }

//为空校验//号码长度正确但此身份证号码不存在

  • 29
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3和TypeScript中,可以通过表单来修改多条数据。下面是一个示例,展示如何使用表单同时修改多条数据: 首先,在Vue组件中定义一个数据对象,用来保存多条数据的表单值: ```vue <template> <form @submit="handleSubmit"> <div v-for="item in items" :key="item.id"> <input v-model="formValues[item.id].name" type="text" /> <input v-model="formValues[item.id].age" type="number" /> </div> <button type="submit">保存</button> </form> </template> <script setup lang="ts"> import { reactive, ref } from 'vue'; interface Item { id: number; name: string; age: number; } const items: Item[] = [ { id: 1, name: 'John', age: 25 }, { id: 2, name: 'Jane', age: 30 }, // ... ]; const formValues = reactive<{ [key: number]: Item }>({}); items.forEach((item) => { formValues[item.id] = { ...item }; }); function handleSubmit() { // 处理表单提交逻辑 // 可以在这里将修改后的数据发送给后端进行保存 console.log(Object.values(formValues)); } </script> ``` 在上述代码中,我们使用了Vue的Composition API来定义响应式的数据对象。`formValues`对象用于保存多条数据的表单值,以每个数据项的id作为键。 在模板中使用`v-for`指令遍历`items`数组,并使用`v-model`指令绑定输入框的值到`formValues`对象上。这样,当用户输入内容时,`formValues`中对应数据项的值会自动更新。 在提交表单时,可以通过`Object.values(formValues)`获取到修改后的数据数组,并进行进一步的处理,例如将数据发送给后端进行保存。 请注意,上述代码使用了Vue 3的新特性 `<script setup>`,可以更简洁地编写组件逻辑。如果你选择使用Options API,可以将相关逻辑放在`data`、`methods`等选项中。 这只是一个简单的示例,你可以根据实际业务需求进行修改和扩展,例如添加校验、数据同步等逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值