JS使用正则表达式实现常用的表单验证功能分析


Posted in Javascript onApril 30, 2020

本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考,具体如下:

表单验证是一个网站或应用的重点,一条合适的错误提示不仅可以减少无效信息录入,更会给用户留下良好的使用体验。但表单设计千差万别,用户输入更不可控。一方面,我们要减少出错提示(这会引起用户反感),而另一方面,我们则希望得到足够多的有效信息。鱼和熊掌如何兼得?

写一个简单的表单验证:https://3water.com/article/185782.htm

从Google中,我们可以找到一些实用的方法:

  • 设计合适的提示信息;
  • 正则表达式筛选错误输入。

如何将错误信息合适的展示给用户,我想是见仁见智,需要根据具体项目具体分析(参考淘宝、京东等电商设计)。这里主要讨论第二种方案:通过正则表达式最大限度的过滤用户输入

这里先列出我自己常用的正则表达式,然后在深入全面的学习它!

常用正则表达式

文本输入(拒绝表情):/^[\u4e00-\u9fa5\w]+.*$/gi

密码: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

中文地址(以中文开始,包含英文字符、数字、括号):/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()()]*$/

身份证/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i

电子邮箱/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

传真/^(\d{3,4}-)?\d{7,8}$/

网址/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/

座机/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/

手机/^1[34578]\d{9}$/

邮编/^[1-9][0-9]{5}$/

通用验证信息提示函数

/**
   * @param {Object} $input 需要验证的输入项
   * @param {String} reg  正则表达式
   * @param {String} tips 提示信息
   */
  function isInfoValid($input, reg, tips) {
   var val = $input.val().trim();
   if(val == '') {
    $input.next().remove();
    $input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能为空!<span>')
   }
   else if(reg && tips && !reg.test(val)) {
    $input.next().remove();
    $input.after('<span class="valid-error">'+ tips +'</span>')
   }else {
    $input.next().remove();
   }
  }

  // 可以这样使用

  isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*请输入正确的邮编!');

深入学习正则表达式

1. RegExp对象

有两种方法实例化RegExp对象

  • 字面量

    var reg = /\bis\b/g; // 全局匹配单词is

  • 构造函数

    var reg = new RegEXP('\\bis\\b',g)

2. 修饰符

  • g:global全文搜索,不添加,搜索到第一个匹配停止 默认false,只读

  • i:ignore case 忽略大小写, 默认false,只读

  • m:multiple lines 多行搜索 默认false,只读

  • lastIndex: 是当前表达式匹配内容的最后一个字符的下一个位置

  • source:正则表达式的文本字符串

    > var reg1 = /\w/gim;
    > reg1.source
    < "\w"

3. 元字符

正则表达式由两种基本字符类型组成:

  1. 原义文本字符

    a,b,c,d..

  2. 元字符

    *+?$ ^ . | \ ( ){ } [ ]

    \t 水平制表符
    \v 垂直制表符
    \n 换行符
    \r 回车符
    \0 空字符
    \f 换页符

4. 字符类

  • 我们可以使用元字符 [] 来构建一个简单的类

所谓类是指符合某些特征的对象,一个泛指,不是特指某个字符

表达式[abc]把字符a或b或c归为一类,表达式可以匹配这类字符

  • 字符取反(^)

使用元字符 ^ 创建反向类

表达式[^abc] 表示 不是字符a或b或c的内容

5. 范围类

  • 使用[a-z]来连接两个字符表示从a到z的任意字符,闭区间,包含a 和 z 本身

    > 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
    < "Q1Q2Q3Q4"
  • 范围类可以连写 [a-zA-Z]

    > '2015-11-5'.replace(/[0-9-]/g, 'A')
    < "AAAAAAAAA"

6.预定义类及边界

6.1 预定义类

字符 等价类 含义
. [^\r\n] 除了回车符和换行符以外的所有字符
\d [0-9] 数字字符
\D [^0-9] 非数字字符
\s [\t\n\x0B\f\r] 空白字符
\w [a-zA-Z_0-9] 单词字符(字母数字下划线)
\W [^a-zA-Z0-9_] 非单词字符

6.2 边界

字符 含义
^ 以XXXXX开始
$ 以xxxx结束
\b 单词边界
\B 非单词边界

7. 量词

字符 含义
出现零次或一次(最多出现1次)
+ 出现一次或多次
* 出现零次或多次(任意
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

8.贪婪模式与非贪婪模式

8.1 贪婪模式

在正则表达式中,默认尽可能多的匹配

> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"

8.2 非贪婪模式

让正则表达谁尽可能少的匹配,也就是说一旦成功匹配就不再继续尝试

做法很简单,在量词后面加一个 ?即可

> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]

9. 分组

9.1 分组

使用 ()可以达到分组的功能,使量词作用于分组

> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"

9.2 或

使用 | 表示 或

> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"

9.3 $引用,捕获分组

  • 注意: 一定要加(),用$捕获分组
> '2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2016"
  • 忽略分组

    不希望捕获某些分组,只需要在分组内加上 ?:

    (?:Byron).(ok)

Javascript 相关文章推荐
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 #jQuery
Vue发布订阅模式实现过程图解
Apr 30 #Javascript
Javascript异步执行不按顺序解决方案
Apr 30 #Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 #Javascript
JavaScript自定义超时API代码实例
Apr 30 #Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 #Javascript
JavaScript find()方法及返回数据实例
Apr 30 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/23 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
python爬取个性签名的方法
2018/06/17 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Django ORM filter() 的运用详解
2020/05/14 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
造型师求职自荐信
2013/09/27 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python