正则表达式基本语法及表单验证操作详解【基于JS】


Posted in Javascript onApril 07, 2017

本文实例讲述了正则表达式基本语法及表单验证操作。分享给大家供大家参考,具体如下:

正则表达式是一种可以用于模式匹配和替换的强有力的工具,是数据的有效性验证。

一、基本语法

位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够使用户更加灵活的定制模式内容,正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符,可以用来规定其前导字符(即位于元字符前面的字符)在目标对象中的出现模式。

1. 较为常用的元字符包括: “+”, “*”,以及 “?”。

“+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。
“*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。
“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。

例:

/fo+/因为正则表达式中包含“+”元字符,表示可以与目标对象中的 “fool”,“fo”,或“football”等在字母f后面连续出现一个或多个字母o的字符串相匹配。
/eg*/因为正则表达式中包含“*”元字符,表示可以与目标对象中的 “easy”,“ego”,或“egg”等在字母e后面连续出现零个或多个字母g的字符串相匹配。
/Wil?/因为上述正则表达式中包含“?”元字符,表示可以与目标对象中的 “Win”,或“Wilson”,等在字母i后面连续出现零个或一个字母l的字符串相匹配。

2. 有时候不知道要匹配多少字符。为了能适应这种不确定性,正则表达式支持限定符的概念。这些限定符可以指定正则表达式的一个给定组件 必须要出现多少次才能满足匹配。

{n} n是一个非负整数。匹配确定的n次。例'o{2}'不能匹配”Bob”中的 ‘o',但是能匹配”food”中的两个o。
{n,} n是一个非负整数。至少匹配n次。例'o{2,}'不能匹配”Bob”中的 ‘o',但能匹配”fooood”中的所有o。'o{1,}'等价于'o+'。'o{0,}'则等价于'o*'。
{n,m} m和n均为非负整数,其中n<=m。最少匹配n次且最多匹配m次。例”o{1,3}”将匹配”foooood”中的前三个o。'o{0,1}'等价于'o?'

请注意在逗号和两个数之间不能有空格。

正则表达式基本语法及表单验证操作详解【基于JS】

3.几个重要的元字符的使用方式:

正则表达式基本语法及表单验证操作详解【基于JS】

\s:用于匹配单个空格符,包括tab键和换行符;
\S:用于匹配除单个空格符之外的所有字符;
\d:用于匹配从0到9的数字;
\w:用于匹配字母,数字或下划线字符;
\W:用于匹配所有与\w不匹配的字符;
. :用于匹配除换行符之外的所有字符。

(说明:我们可以把\s和\S以及\w和\W看作互为逆运算)

/\s+/ 上述正则表达式可以用于匹配目标对象中的一个或多个空格字符。
/\d000/ 如果我们手中有一份复杂的财务报表,那么我们可以通过上述正则表达式轻而易举的查找到所有总额达千元的款项。

4.除了我们以上所介绍的元字符之外,正则表达式中还具有另外一种较为独特的专用字符,即定位符。定位符用于规定匹配模式在目标对象中的出现位置。 较为常用的定位符包括: “^”, “$”, “\b” 以及 “\B”。

“^”定位符规定匹配模式必须出现在目标字符串的开头
“$”位符规定匹配模式必须出现在目标对象的结尾
“\b”定位符规定匹配模式必须出现在目标字符串的开头或结尾的两个边界之一
“\B”定位符则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内,即匹配对象既不能作为目标字符串的开头,也不能作为结尾。
同样,我们也可以把“^”和“$”以及“\b”和“\B”看作是互为逆运算的两组定位符。
举例来说: /^hell/ 因为上述正则表达式中包含“^”定位符,所以可以与目标对象中以 “hell”, “hello”或“hellhound”开头的字符串相
匹配。 /ar$/ 因为上述正则表达式中包含“$”定位符,所以可以与目标对象中以 “car”, “bar”或 “ar” 结尾的字符串相匹配。
/\bbom/ 因为上述正则表达式模式以“\b”定位符开头,所以可以与目标对象中以 “bomb”, 或 “bom”开头的字符串相匹配。
/man\b/因为上述正则表达式模式以“\b”定位符结尾,所以可以与目标对象中以 “human”, “woman”或 “man”结尾的字符串相匹配。

说明:

为了能够方便用户更加灵活的设定匹配模式,正则表达式允许使用者在匹配模式中指定某一个范围而不局限于具体的字符。例如:
/[A-Z]/上述正则表达式将会与从A到Z范围内任何一个大写字母相匹配。
/[a-z]/上述正则表达式将会与从a到z范围内任何一个小写字母相匹配。
/[0-9]/  上述正则表达式将会与从0到9范围内任何一个数字相匹配。
/([a-z][A-Z][0-9])+/ 上述正则表达式将会与任何由字母和数字组成的字符串,如 “aB0” 等相匹配。

这里需要提醒用户注意的一点就是可以在正则表达式中使用 “()” 把字符串组合在一起。“()”符号包含的内容必须同时出现在目标对象中。

如果我们希望在正则表达式中实现类似编程逻辑中的“或”运算,在多个不同的模式中任选一个进行匹配的话,可以使用管道符 “|”。

正则表达式中还有一个较为常用的运算符,即否定符 “[^]”。与我们前文所介绍的定位符 “^” 不同,否定符 “[^]”规定目标对象中不能存在模式中所规定的字符串。

例如:/[^A-C]/上述字符串将会与目标对象中除A,B,和C之外的任何字符相匹配。一般来说,当“^”出现在 “[]”内时就被视做否定运算符;

而当“^”位于“[]”之外,或没有“[]”时,则应当被视做定位符。

最后,当用户需要在正则表达式的模式中加入元字符,并查找其匹配对象时,可以使用转义符“\”。例如:/Th\*/上述正则表达式将会与目标对象中的“Th*”而非“The”等相匹配。

二、使用实例

在JavaScript 1.2中带有一个功能强大的RegExp()对象,可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象中是否

包含匹配模式,并相应的返回true或false。

语法: re = new RegExp("pattern",["flags"])

re——必选项。将要赋值为正则表达式模式的变量名。
pattern——必选项。要使用的正则表达式模式。
flags——可选项。要用引号将 flag 引起来。标志可以组合使用,可用的有:g (全文查找出现的所有 pattern)   i (忽略大小写)   m (多行查找)

正则表达式基本语法及表单验证操作详解【基于JS】

常用正则:

验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\"  等字符:[^%&',;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:--正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?
非单字节 [^\x00-xff]

1.返回一个含有汉子的字符串长度

function getlength(str){
 return str.replace(/[^\x00-xff]/g,"xx").length;
}

2.用户名6-25个字符,不能有非法字符

oName.onblur=function(){
    var re=/[^\w\u4e00-\u9fa5]/g;
    if (re.test(this.value)){
      name_msg.innerHTML='含有非法字符!';
    }
    else if(this.value){
      name_msg.innerHTML='用户名不能为空!';
    }
    else if(name_length>25){
      name_msg.innerHTML='长度超过25个字符!';
    }
    else if(name_length<6){
      name_msg.innerHTML='长度少于6个字符!';
    }
    else{  OK; }
}

3.用户设置密码,不能为空、相同字符、全为数字、全为字母

pwd.onblur=function(){
    if(this.value==""){pwd_msg.innerHTML='不能为空!'}
}
Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
js实现图片加载淡入淡出效果
Apr 07 #Javascript
AngularJS中的拦截器实例详解
Apr 07 #Javascript
Vue.js如何优雅的进行form validation
Apr 07 #Javascript
详解Node.js实现301、302重定向服务
Apr 07 #Javascript
Express URL跳转(重定向)的实现方法
Apr 07 #Javascript
微信小程序 首页制作简单实例
Apr 07 #Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 #Javascript
You might like
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
javascript自执行函数
2017/02/10 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python 从attribute到property详解
2020/03/05 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
雅虎笔试题(字符串操作)
2015/03/24 面试题
企业优秀团员事迹材料
2014/08/20 职场文书
学校周年庆活动方案
2014/08/22 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
民政局个人整改措施
2014/09/24 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
毕业生入职感言
2015/07/31 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis