正则表达式基本语法及表单验证操作详解【基于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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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部分常见问题总结
2008/03/27 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
js实现右键菜单功能
2016/11/28 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python list格式数据excel导出方法
2018/10/31 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
django 信号调度机制详解
2019/07/19 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
keras 读取多标签图像数据方式
2020/06/12 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
25岁生日感言
2014/01/13 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
初中生评语大全
2014/04/24 职场文书
师德师风整改措施
2014/10/24 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS