Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍

 更新时间:2024年01月03日 10:19:35   作者:一颗知足的心  
这篇文章主要介绍了Vue-ANTD表单输入中自定义校验一些正则表达式规则介绍,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

写一个示例

表单的rules里面添加自定义校验的方法:

{ rules: [  {validator: this.checkPhone} ] }

在下面的method里面添加方法:

    checkPhone (rule, value, callback) {
      const pwdRegex = new RegExp('^[1-9]\\d{0,11}$')
         if (!pwdRegex.test(value)) {
        callback(new Error('电话号码输入格式有误'))
      }  
       callback()
    },

1.校验输入为电话号码(手机号码)

^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$

2.校验输入为是否为邮箱

/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/

3.校验是否全部为数字且有一范围

^[1-9]\\d{0,11}$ 或者 ^[1-9]\d{0,11}$

4.校验输入包含数字+字母+特殊符号

^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$

5.校验输入包含字母加数字

其实这三者可以随意组合的

有些两边要加引号,有些不加,都试试吧

'^[A-Za-z0-9]{6,6}$'

6.输入0-10的整数,输入1-999的整数

/^([0-9]|10)$/
/^(?!0)\d{1,3}$/

后面还会添加更多常用规则

更多规则点击这里

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目打包之开发环境和部署环境的实现

    vue项目打包之开发环境和部署环境的实现

    这篇文章主要介绍了vue项目打包之开发环境和部署环境的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 浅谈Vue SPA 首屏加载优化实践

    浅谈Vue SPA 首屏加载优化实践

    本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue如何配置根目录@(引用路径)

    Vue如何配置根目录@(引用路径)

    这篇文章主要介绍了Vue如何配置根目录@(引用路径),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • ElementUI的this.$notify.close()调用不起作用的解决

    ElementUI的this.$notify.close()调用不起作用的解决

    本文主要介绍了ElementUI的this.$notify.close()调用不起作用的解决,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 使用vue中的v-for遍历二维数组的方法

    使用vue中的v-for遍历二维数组的方法

    下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue element-ui实现el-table表格多选以及回显方式

    vue element-ui实现el-table表格多选以及回显方式

    这篇文章主要介绍了vue element-ui实现el-table表格多选以及回显方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue中使用scrollTo没有效果的完美解决方法

    vue中使用scrollTo没有效果的完美解决方法

    这篇文章主要介绍了在vue中使用scrollTo没有效果的解决方法,本文给大家分享具体操作步骤,在这里需要注意scrollTo要作用在可滚动的元素上,不然不生效,scrollTop就会一直为0,需要的朋友可以参考下
    2023-10-10
  • Vue.js实现拖放效果的实例

    Vue.js实现拖放效果的实例

    这篇文章主要介绍了Vue.js实现拖放效果的实例的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • vue 指定文字高亮的实现示例

    vue 指定文字高亮的实现示例

    在做文字处理的项目时经常会遇到搜索文字并高亮的需求,本文就来介绍vue 指定文字高亮的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 封装Vue Element的table表格组件的示例详解

    封装Vue Element的table表格组件的示例详解

    这篇文章主要介绍了封装Vue Element的table表格组件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-08-08

最新评论