JavaScript表单验证之正则表达式 #42
Description
本文重点：
- 了解什么是正则表达式
- 掌握常用的正则表达式
- 使用正则表达式作复杂的表单验证
正则表达式是什么
- 又称为正规表示法，常规表示法（英语： Regular Expression ，在代码中常简写为 regex 、 regexp 或 RE ），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
- 一个描述字符模式的对象，由一些特殊的符号组成，其组成的字符模式用来匹配各种表达式；
- 许多程序设计语言都支持利用正则表达式进行字符串操作，正则表达式这个概念最初是由 Unix 中的工具软件（例如 sed 和 grep ）普及开的。
示例： http://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html
- 汉字：
^[\u4e00-\u9fa5]{0,}$ - 由数字和26个英文字母组成的字符串：
^[A-Za-z0-9]+$ - 由数字、26个英文字母或者下划线组成的字符串：
^\w+$ 或 ^\w{3,20}$ - Email地址：
^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ - 手机号码：
^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ - 身份证号(15位、18位数字)：
^\d{15}|\d{18}$ - 腾讯 QQ 号(从 10000 开始)：
[1-9][0-9]{4,}
RegExp对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具
-
创建语法：
- 方法1：直接量
/pattern/attributes
//如在字符串中对 "is" 进行全局搜索： var str="Is this all there is?"; var patt1=/is/g;
- 方法2：实例化 RegExp 对象
new RegExp(pattern, attributes); //如在字符串中对"is" 进行全局搜索： var str="Is this all there is?"; var patt1= new RegExp("is","g")
- 方法1：直接量
-
RegExp 对象修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止） |
| m | 执行多行匹配 |
- RegExp对象方括号
| 符号 | 描述 |
|---|---|
[abc] |
查找方括号之间的任何字符 |
[^abc] |
查找任何不在方括号之间的字符 |
[0-9] |
查找任何从 0 至 9 的数字 |
[a-z] |
查找任何从小写 a 到小写 z 的字符 |
[A-Z] |
查找任何从大写 A 到大写 Z 的字符 |
[a-zA-Z] |
查找任何字母 |
| [red | blue | green] | 查找任何指定的选项 |
- RegExp 对象常用符号
| 符号 | 描述 |
|---|---|
/.../ |
代表一个模式的开始和结束 |
^ |
匹配字符串的开始 |
$ |
匹配字符串的结束 |
\s |
任何空白字符 |
\S |
任何非空白字符 |
\d |
匹配一个数字字符，等价于 [0-9] |
\D |
除了数字之外的任何字符，等价于 [^0-9] |
\w |
匹配一个数字、下划线或字母字符，等价于 [A-Za-z0-9_] |
. |
除了换行符之外的任意字符 |
- RegExp 对象重复字符串
| 符号 | 描述 |
|---|---|
{n} |
匹配前一项 n 次 |
{n,} |
匹配前一项 n 次，或者多于 n 次 |
{n,m} |
匹配前一项至少 n 次，但是不能超过 m 次 |
* |
匹配前一项 0 次或多次，等价于 {0,} |
+ |
匹配前一项 1 次或多次，等价于 {1,} |
? |
匹配前一项 0 次或 1 次，也就是说前一项是可选的，等价于 {0,1} |
- 使用正则表达式验证手机号码,手机格式要求 13，15，18 开头的 11 位数字组成
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>正则表达式验证手机号码</title>
<script type="text/javascript">
function check(){
var str = document.getElementById("str");
if( str.value == "" ){
alert("请输入要验证的字符串");
str.focus();
return;
}
//这里编写手机正则表达式 13，15，18 开头的 11 为数字组成
//提示 RegExp 对象的 test() 方法用于检测一个字符串是否匹配某个表达式，匹配则返回 true，否则 false
alert( /^[13|15|18]\d{9}$/.test(str.value)?"YES,通过!":"NO,不通过!");
}
</script>
</head>
<body>
<h3>表单验证</h3>
手机：<input type="text" value="" id="str"/><br/>
<input type="button" value="校验" onclick="check()" />
</body>
</html>- 同理，验证邮箱示例（修改
alert部分）
alert( /^\w+@\w+(\.\w+){1,2}$/.test(str.value)?"YES,通过!":"NO,不通过!" );String 对象与正则表达式
- 支持正则表达式的 String 对象的方法
| 符号 | 描述 |
|---|---|
search(reg) |
检索与正则表达式相匹配的值,返回查找位置的索引，否则返回 -1 |
match(reg) |
查找到一个或多个正则表达式的匹配，返回数组或 null |
replace(reg,str) |
替换与正则表达式匹配的子串 |
split(reg) |
把字符串分割为字符串数组 |
- 示例
var str = "this is a big dog!";
// search() 方法应用，查找 str 字符串中的 "i" 字符串所在的位置
str.search(/i/); //返回 2, 即 this 中的 i 的位置
// match() 方法应用，查找 str 字符串中的 "big" 字符串
str.match(/big/); //返回["big"]
// replace() 方法应用，把 str 字符串中的 i 字符替换成大写的 I 字符；
str.replace (/i/g,"I"); // 返回 "thIs Is a bIg dog!"
str.replace("i","I"); // 返回"thIs is a big dog!"
// split() 方法应用，把 str 字符串中的按空格进行分割
str.split(" "); //返回 ["this","","","","is","","","a","","big","","","dog!"]
str.split(/\s+/); //返回["this","is","a","big","dog!"]