正则表达式基本语法及表单验证操作详解【基于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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
js消除图片小游戏代码
Dec 11 Javascript
详解vue组件之间的通信
Aug 30 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入门速成教程
2007/03/19 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP静态文件生成类实例
2014/11/29 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python自定义类的数组排序实现代码
2016/08/28 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python实现AES加密和解密
2019/03/27 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python内置函数locals和globals对比
2020/04/28 Python
如何理解python面向对象编程
2020/06/01 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
临床专业自荐信
2014/06/22 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
简爱读书笔记
2015/06/26 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python