element的表单校验证件号规则及输入“无”的情况校验通过(示例代码)

 更新时间:2023年11月09日 17:02:48   作者:昨夜小楼又东风  
这篇文章主要介绍了element的表单校验证件号规则及输入“无”的情况校验通过,使用方法对校验数据进行过滤判断,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

element的表单校验证件号规则以及输入“无”的情况校验通过

  <el-col :span="6">
                                <el-form-item label="证件号码" prop="Idnumber" class="grid-content bg-purple">
                                        <el-input v-model="testForm.Idnumber" placeholder="请输入证件号码" @change="changeIdnumber"></el-input>
                                </el-form-item>
                     </el-col>

使用方法对校验数据进行过滤判断

data(){
      let CrdtNoValidar=(rule,value,callback)=>{
               if(value&&this.testForm.idtype=="001"){
                         if(value=="无"){
                            callback();
                             return
                         }
                         let reg18=/^[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]$/;
                         let reg15=/^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
                         if(reg18.test(value)||reg15.test(value)){
                            callback()
                         }else{
                            callback(new Error("请输入有效的身份证号码!"))
                         }
               }else{
                callback()
               }
         };
       return{
            rules:{
                Idnumber:[{required:false,message:'请输入证件号码',trigger:'blur'},{validator:CrdtNoValidar,trigger:'blur'}],
            },
    }
}

输入一个异常的证件号码进行校验

输入一个正常的证件号码进行校验

输入汉字“无”进行校验

到此这篇关于element的表单校验证件号规则以及输入“无”的情况校验通过的文章就介绍到这了,更多相关element表单校验证件号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中的nextTick方法详解

    Vue中的nextTick方法详解

    Vue的nextTick方法是用来在下次DOM更新周期中执行回调函数的方法,用于DOM操作后获取DOM更新后的状态,使用场景包括异步更新DOM、获取更新后元素的位置等情况,一般结合Vue的异步更新机制和watch监听器使用,实现方式可使用Promise、setTimeout等异步方法
    2023-04-04
  • Vue框架之goods组件开发详解

    Vue框架之goods组件开发详解

    这篇文章主要介绍了Vue框架之goodvs组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • element-ui自定义message-box自定义样式不生效的解决

    element-ui自定义message-box自定义样式不生效的解决

    这篇文章主要介绍了element-ui自定义message-box自定义样式不生效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue.js引用背景图background无效的3种解决方案

    vue.js引用背景图background无效的3种解决方案

    这篇文章主要介绍了vue.js引用背景图background无效的3种解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 使用Vue构建可重用的分页组件

    使用Vue构建可重用的分页组件

    分页组件在web项目中是十分常见的组件,让我们使用Vue构建可重用的分页组件,关于基本结构和相关事件监听大家参考下本文
    2018-03-03
  • vue项目实现img的src动态赋值

    vue项目实现img的src动态赋值

    这篇文章主要介绍了vue项目实现img的src动态赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中css如何使用data中的变量

    vue中css如何使用data中的变量

    这篇文章主要介绍了vue中css如何使用data中的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2.0实现列表数据增加和删除

    vue2.0实现列表数据增加和删除

    这篇文章主要为大家详细介绍了vue2.0实现列表数据增加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue实现动态路由添加功能的简单方法(无废话版本)

    vue实现动态路由添加功能的简单方法(无废话版本)

    ue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下
    2023-02-02
  • 利用Vue实现移动端图片轮播组件的方法实例

    利用Vue实现移动端图片轮播组件的方法实例

    轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效。下面这篇文章主要给大家介绍了关于利用Vue实现移动端图片轮播组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
    2017-08-08

最新评论