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

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

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

写一个简单的表单验证:https://www.jb51.net/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)

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于jQuery相关内容可查看本站专题:《jQuery正则表达式用法总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

(0)

相关推荐

  • JS操作json对象key、value的常用方法分析

    本文实例讲述了JS操作json对象key.value的常用方法.分享给大家供大家参考,具体如下: 一.定义JSON对象 // 首先定义一个json对象,对象以"{"(左括号)开始,"}"(右括号)结束 // 花括号内为键.值对 键必须用引号括起来,值若不是字符串则不必 var jsonObj = { "创维电视" : 50, "卡萨帝北京" : 40, "家电" : 40, "松下" :

  • JS数组的常用10种方法详解

    数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方法: 在数组末尾插入元素 arr.push(value),在数组的末尾添加一个或多个元素,并返回数组的新长度. 例如: let arr=[1,2,3,4,5] var longth=arr.push(6,7); console.log(arr, longth); 数组的arr的值变为arr[1,2,3,4,5,6,7]; length接收返回的是修改后数组的长度7; 删除数组末尾的元素 arr.pop()删除索

  • JavaScript常用工具函数大全

    本文实例总结了JavaScript常用工具函数.分享给大家供大家参考,具体如下: 为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = function (event, fn) {. []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; }; 为元素添加trigger方

  • JavaScript交换变量的常用方法小结【4种方法】

    本文实例讲述了JavaScript交换变量的常用方法.分享给大家供大家参考,具体如下: 许多算法需要交换2个变量.在编码面试中,可能会问您"如何在没有临时变量的情况下交换2个变量?".我很高兴知道执行变量交换的多种方法.在本文中,您将了解大约4种交换方式(2种使用额外的内存,而2种不使用额外的内存). 1. 解构赋值 解构赋值语法(ES2015的功能)使您可以将数组的项提取到变量中.例如,以下代码对数组进行解构: let a; let b; [a, b] = [1, 2, 3]; a;

  • JavaScript读取本地文件常用方法流程解析

    出于安全和隐私的原因,web 应用程序不能直接访问用户设备上的文件.如果需要读取一个或多个本地文件,可以通过使用input file和FileReader来实现.在这篇文章中,我们将通过一些例子来看看它是如何工作的. 文件操作的流程 获取文件 由于浏览器中的 JS 无法从用户的设备访问本地文件,我们需要为用户提供一种方法来选择一个或多个文件供我们使用.这可以通过文件选择器<input type='fule' />来完成. <input type="file">

  • JS删除数组指定值常用方法详解

    一. 删除数组中所有指定值 先看一种危险的方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = function() { var arr = [

  • 国内常用的js类库大全(CDN公共库)

    国内站点经常使用的一些 CDN 静态资源公共库加速服务 web开发人员们的福利来了..旨在为大家提供更快很多其它更好的静态资源库的CDN载入库方案! CDN公共库是指将经常使用的JS库存放在CDN节点,以方便广大开发人员直接调用. 与将JS库存放在server单机上相比,CDN公共库更加稳定.快速.一 般的CDN公共库都会包括全球全部最流行的开源JavaScript.JQuery等库.你能够在自己的网页上直接通过script标记引用这些资源.这样做不仅能够为您 节省流量.还能通过CDN加速.获得

  • JavaScript常用工具函数库汇总

    对象或数组的深拷贝 /** * 对象或数组的深拷贝 * @param {*} cloneObj 被克隆的对象 * @param {*} targetObj 克隆的目标对象 * @param {*} isOverride 若属性重复,是否覆盖被克隆对象的属性 */ function deepClone(cloneObj, targetObj, isOverride = true) { const _toString = Object.prototype.toString if (_toString

  • JavaScript常用8种数组去重代码实例

    在我们学习和使用JavaScript的中,会经常使用到数组的去重,接下来的内容,来给大家分享一下,我们在开发过程中,常用到的数组去重方法,这些方法都是有在实战中真实实践过的,非常值得大家学习和收藏,我们一起来看看都有哪些方法吧! 1.利用对象的属性 使用对象属性不重名的特性. var arr = ['qiang','ming','tao','li','liang','you','qiang','tao']; console.time("nonredundant1"); var nonr

  • JS数据类型判断的几种常用方法

    JavaScript 中常见数据类型有Number.String.Boolean.Object.Array.Json.Function.Date.RegExp.Error.undefined.Null等十几种.ES6还有新增的数据类型有Symbol.Set.Map等.在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助. typeof 判断(最常用) typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 . typeof 有2种使用方式:typeof(表

  • 工作中常用js的汇总

    一.javascript 中防止重复点击.防止点击过快 防止重复点击可以添加一个开关,让这个开关默认为 true,第一次点击将其变为 false,点击事件的执行需要判断这个开关是否为 true,为 true 执行,false 不执行.例子如下: var isclick= true; function click(){ if(isclick){ isclick = false; //下面添加需要执行的事件 ... } 如果只是防止点击过快,还可以设置定时器,在一定时间后,自动将开关变为 true,

随机推荐