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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
js使用递归解析xml
Dec 12 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 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
adodb与adodb_lite之比较
2006/12/31 PHP
php 日期时间处理函数小结
2009/12/18 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
用Python制作音乐海报
2021/01/26 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
出国签证在职证明
2014/01/16 职场文书
企业挂职心得体会
2014/09/10 职场文书
工作作风建设心得体会
2014/10/22 职场文书
婚宴新郎致辞
2015/07/28 职场文书
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL