vue3表单添加特定格式的校验规则

最新推荐文章于 2024-07-14 18:10:31 发布

你呀1229

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量146

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_56728548/article/details/136474149

版权

文章描述了如何在Vue和React组件中，通过正则表达式实现身份证号码的输入验证，确保格式的正确性。

摘要由CSDN通过智能技术生成

身份号格式校验

  <a-col :span="4">
                    <a-form-item label="身份证号：" name="idCard" :label-col="{ span: 10 }" 
                        :wrapper-col="{ span: 14 }">
                      <a-input :disabled="disable" oninput="value=value.replace(/\s*/g,'')"  
                         v-model:value="formState.idCard" placeholder="请输入" />
                    </a-form-item>
  </a-col>
  const rulesRef = reactive({
    idCard:[{ required: true}, {validator: async (rule:any, value:any, callback:any) => {
          const reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1- 
          9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/;
          if (value == '' || value == undefined || value == null) {
          //  return Promise.reject('请输入');  本身带着一个校验 这里不需要再提示
          } 
          else {
            if ((!reg.test(value)) && (value != ''|| value == undefined || value == null)) 
            {
              return Promise.reject('格式不正确');
            }
          }
          return Promise.resolve();
          }, }],
  }）