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 相关文章推荐
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Python机器学习之决策树和随机森林
Jul 15 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
重定向实现代码
2006/11/20 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
javascript实现抢购倒计时程序
2019/08/26 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python基础教程之分支、循环简单用法
2016/06/16 Python
利用python画一颗心的方法示例
2017/01/31 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
补充协议书范本
2014/04/23 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
欠条样本
2015/07/03 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书