正则表达式基本语法及表单验证操作详解【基于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 相关文章推荐
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
vue.js学习之递归组件
Dec 13 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP 简单日历实现代码
2009/10/28 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript 空位补零实现代码
2010/02/26 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
python之wxPython应用实例
2014/09/28 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
django项目搭建与Session使用详解
2018/10/10 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python文件选择对话框的操作方法
2019/06/27 Python
利用Python实现kNN算法的代码
2019/08/16 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
志愿者服务感言
2014/02/27 职场文书
2015年党员承诺书
2015/01/21 职场文书
公司市场部岗位职责
2015/04/15 职场文书
市场部岗位职责范本
2015/04/15 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
女性励志书籍推荐
2019/08/19 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
SQL Server 中的事务介绍
2022/05/20 SQL Server