JavaScript正则表达式基础语法与表单验证实战

正则表达式基础与语法

本文详细讲解正则表达式的基础语法及其在表单验证中的实际应用，供读者参考学习。

正则表达式是进行模式匹配与替换的高效工具，广泛应用于数据有效性验证场景。

一、基本语法

正则模式通常置于“/”定界符之间，用于在目标对象中执行匹配。用户只需将期望查找的模式内容放入定界符内即可。为增强模式定制的灵活性，正则表达式提供了专门的“元字符”，用于规定前导字符在目标对象中出现的具体模式。

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}：n和m均为非负整数且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正则表达式实战应用

二、使用实例

在JavaScript 1.2中提供了功能强大的RegExp()对象，用于执行正则表达式的匹配操作。

其中的test()方法可检验目标对象中是否包含匹配模式，并相应返回true或false。

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

re——必选项，赋值为正则表达式模式的变量名。 pattern——必选项，要使用的正则表达式模式。 flags——可选项，需用引号包裹。标志可组合使用，可用选项包括：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：另提供两款便捷的正则表达式工具供参考使用：

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

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

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

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