自定义校验规则（js正则校验身份证号）

cici呲呲

已于 2024-02-21 16:49:48 修改

阅读量668

点赞数 8

CC 4.0 BY-SA版权

文章标签： javascript 前端 java

于 2024-02-21 16:35:56 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65518920/article/details/136214906

该篇文章介绍了如何在Vue.js的表单中使用自定义验证函数和正则表达式，对身份证号码进行输入验证，确保格式正确且只允许输入数字或x(X)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        data() {
            var validateIdCard = (rule, value, callback) => {
                let id = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
                if (id.test(value)===false) {
                    return callback(new Error('请输入正确的身份证号'));
                } else {
                    callback();
                }
            };
             return {
                addOrEditForm: {
                    idCard: "",
                }
                addOrEditRules: {
                    idCard: [
                        { validator: validateIdCard, trigger: 'blur' },
                        { required: true, message: "请输入身份证号", trigger: "blur" }
                     ],
                   
                    }
                },
         }

@input="addOrEditForm.idCard = verifyfilter('cardNum',addOrEditForm.idCard)" ，用于限制输入框只能输入数字或x(X),自定义方法，未引入勿用

<el-form ref="addOrEditForm" :model="addOrEditForm" :rules="addOrEditRules" label-width="80px"
                style="padding-right: 20px;">                
    <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="addOrEditForm.idCard" :clearable="true" class="items" style="width: 100%;"
                        @input="addOrEditForm.idCard = verifyfilter('cardNum',addOrEditForm.idCard)"
                        placeholder="请输入身份证号">
        </el-input>
    </el-form-item>
</el-form>