Qingquan-Li / blog

My Blog
https://Qingquan-Li.github.io/blog/
132 stars 16 forks source link

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

Open Qingquan-Li opened 7 years ago

Qingquan-Li commented 7 years ago

本文重点:

  • 了解什么是正则表达式
  • 掌握常用的正则表达式
  • 使用正则表达式作复杂的表单验证


正则表达式是什么

示例: http://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html



RegExp对象

RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具

修饰符 描述
i 执行对大小写不敏感的匹配
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
m 执行多行匹配
符号 描述
[abc] 查找方括号之间的任何字符
[^abc] 查找任何不在方括号之间的字符
[0-9] 查找任何从 0 至 9 的数字
[a-z] 查找任何从小写 a 到小写 z 的字符
[A-Z] 查找任何从大写 A 到大写 Z 的字符
[a-zA-Z] 查找任何字母
[red | blue | green] 查找任何指定的选项
符号 描述
/.../ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符,等价于 [0-9]
\D 除了数字之外的任何字符,等价于 [^0-9]
\w 匹配一个数字、下划线或字母字符,等价于 [A-Za-z0-9_]
. 除了换行符之外的任意字符
符号 描述
{n} 匹配前一项 n 次
{n,} 匹配前一项 n 次,或者多于 n 次
{n,m} 匹配前一项至少 n 次,但是不能超过 m 次
* 匹配前一项 0 次或多次,等价于 {0,}
+ 匹配前一项 1 次或多次,等价于 {1,}
? 匹配前一项 0 次或 1 次,也就是说前一项是可选的,等价于 {0,1}
<!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>



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