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

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

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

一、基本语法

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

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?'

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

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

\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 (多行查找)

常用正则：

验证数字：^[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='不能为空！'}
}

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools./regex/javascript

正则表达式在线生成工具：
http://tools./regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# 正则表达式  # 基本语法  # 表单验证  # Javascript中正则表达式的使用及基本语法  # JS正则表达式一条龙讲解(从原理和语法到JS正则)  # 详解js正则表达式语法介绍  # 老生常谈JavaScript 正则表达式语法  # JavaScript正则表达式上之基本语法(推荐)  # javascript正则表达式定义（语法）总结  # js正则表达式基本语法(精粹)  # js 玩转正则表达式之语法高亮  # 正则表达式语法规则及在Javascript和C#中的使用方法  # javascript中正则表达式语法详解  # 象中  # 相匹配  # 将会  # 出现在  # 多个  # 浮点数  # 英文字母  # 中以  # 下划线  # 格式为  # 任何一个  # 是一个  # 为空  # 我们可以  # 可以使用  # 正整数  # 可以用来  # 运算符  # 操作技巧 

相关文章： 安徽网站建设与外贸建站服务专业定制方案  如何用AWS免费套餐快速搭建高效网站？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  高防服务器租用指南：配置选择与快速部署攻略  php条件判断怎么写_ifelse和switchcase的使用区别【对比】  如何选择高性价比服务器搭建个人网站？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  太原网站制作公司有哪些,网约车营运证查询官网？  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  如何在景安服务器上快速搭建个人网站？  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  php json中文编码为null的解决办法  宝塔建站后网页无法访问如何解决？  c++ stringstream用法详解_c++字符串与数字转换利器  如何配置支付宝与微信支付功能？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  建站之星2.7模板快速切换与批量管理功能操作指南  电脑免费海报制作网站推荐,招聘海报哪个网站多？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  广州营销型建站服务商推荐：技术优势与SEO优化解析  如何在万网自助建站中设置域名及备案？  如何通过商城免费建站系统源码自定义网站主题？  宠物网站制作html代码,有没有专门介绍宠物如何养的网站啊？  ,在苏州找工作，上哪个网站比较好？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  建站之星展会模版如何一键下载生成？  如何在搬瓦工VPS快速搭建网站？  c# await 一个已经完成的Task会发生什么  定制建站策划方案_专业建站与网站建设方案一站式指南  如何在建站之星网店版论坛获取技术支持？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  图册素材网站设计制作软件,图册的导出方式有几种？  Thinkphp 中 distinct 的用法解析  建站之星安装后如何配置SEO及设计样式？  建站之星后台密码遗忘或太弱？如何重置与强化？  建站主机是否属于云主机类型？  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  昆明高端网站制作公司,昆明公租房申请网上登录入口？  定制建站流程步骤详解：一站式方案设计与开发指南  青浦网站制作公司有哪些,苹果官网发货地是哪里？  贸易公司网站制作流程,出口贸易网站设计怎么做？  建站之星伪静态规则如何设置？  上海制作企业网站有哪些,上海有哪些网站可以让企业免费发布招聘信息？  平台云上自主建站：模板化设计与智能工具打造高效网站  建站之星CMS建站配置指南：模板选择与SEO优化技巧  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  如何在VPS电脑上快速搭建网站？  小建面朝正北，A点实际方位是否存在偏差？  教程网站设计制作软件,怎么创建自己的一个网站？  如何制作算命网站,怎么注册算命网站？