JavaScript表单验证之正则表达式 #42

Qingquan-Li · 2017-05-13T08:16:29Z

本文重点：

了解什么是正则表达式

掌握常用的正则表达式

使用正则表达式作复杂的表单验证

正则表达式是什么

又称为正规表示法，常规表示法（英语： 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")

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!"]

参考
- jQuery 表单验证：https://github.com/jquery-validation/jquery-validation
- 教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

The text was updated successfully, but these errors were encountered:

Qingquan-Li added the JavaScript label May 13, 2017

Qingquan-Li mentioned this issue May 13, 2017

JavaScript表单验证 #41

Open

Qingquan-Li changed the title ~~JavaScript_3 表单验证之正则表达式~~ JavaScript表单验证之正则表达式 Apr 22, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JavaScript表单验证之正则表达式 #42

JavaScript表单验证之正则表达式 #42

Qingquan-Li commented May 13, 2017

JavaScript表单验证之正则表达式 #42

JavaScript表单验证之正则表达式 #42

Comments

Qingquan-Li commented May 13, 2017

正则表达式是什么

RegExp对象

String 对象与正则表达式