JS之正则表达式

一、正则表达的目标：

　　1、使用表单事件和脚本函数实现表单验证

　　2、使用String对象和文本框控件常用属性和方法实现客户端验证

二、什么需要表单验证：

　　1、表单元素是否为空

　　2、用户名和密码

　　3、E-mail地址是否正确

　　4、身份证号是否是数字

三、表单验证思路：

　　1、获得表单元素值

　　2、使用JavaScript的一些方法对数据进行判断

　　3、当表单提交时，对获取的数据进行验证

四、正则表达式：是一个描述字符模式的对象

　　第一步：定义正则表达式

　　第二步：表达式的模式

　　1、定义正则表达式：

简单模式：

　　普通方式：var reg=/表达式/附加参数

　　　　　　例：var reg=/white/; 里面必须是white

　　　　　　　　var reg=/white/g; g是全局匹配，找到表单字符串里所有的white

　　构造方式：var reg=new RegExp("表达式","附加参数");

　　　　　　　var reg=new RegExp("white");

　　　　　　　var reg=new RegExp("white","g");

复杂模式：

RegExp常用符号：

这些符号都如何使用呢？下面来看几个例子：

结果为：

五、RegExp方法验证：

正则表达式写出来后，如何验证呢？用test()、exec()方法

test()方法检索字符串中的指定值，返回值时true或false

exec()方法检索字符串中的指定值，返回值是被找到的值，如果没有发现匹配，则返回null

1、test()

1 var reg=/a/i;     //附加参数为"i",意思为：忽略大小写ignoreCase
2             var content=prompt('请输入内容：');
3             //验证
4             alert(reg.test(content)?'验证通过':'验证失败')    //content里必须包含a

2、exec()

 1         var reg1=/a/g;     
 2         //附加参数为"g",意思为global：全局匹配，匹配到第一个"a"时，不停止，继续往后匹配，直到字符串完
 3             var content1='You are an old driver';
 4             while(true){
 5                 var b=reg1.exec(content1);    //若content1里有"a",则返回"a";否则返回"null"
 6                 alert(b)    
 7                 if(!b){
 8                     break;
 9                 }
10             }

最后写一个练习题：验证一个注册页面

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>登录验证</title>
 6         <script type="text/javascript">

 7             window.onload=function(){
 8                 //获取需要验证的表单内容
 9                 //JS事件驱动进行表单验证
10                 //验证规则        
11 //var name=document.getElementById('name').value;
　　// 这一行必须放在onload点击事件里面，否则name值为空。
12 //因为这一行赋值在页面加载完已经赋值了，然而此时表单并未提交
13                 var login=document.getElementById('login');
14                 login.onclick=function(){
15                     var name=document.getElementById('name').value;
16                     var pwd1=document.getElementById('pwd1').value;
17                     var riqi=document.getElementById('riqi').value;
18                     var reg1=/^[A-Za-z][A-Za-z0-9]{3,15}$/;
19                     if(!reg1.test(name)){
20                         alert('用户名验证失败')
21                     }
22                     else{
23                         alert('用户名验证成功')
24                     }
25                     var reg2=/^[a-zd]{4,10}$/i;
26                     if(reg2.test(pwd1)==false){
27                         alert('密码验证失败')
28                     }
29                     else{
30                         alert('密码验证成功')
31                     }
32                     var reg3=/^(19d{2}|200d)-(1[0-2]|0[1-9])-(0[1-9]|[1-2]d|3[0-1])$/;
33                     if(reg3.test(riqi)==false){
34                         alert('出生日期验证失败')
35                     }
36                     else{
37                         alert('出生日期验证成功')
38                     }
39                 }
40                 
41             }
42         </script>
43     </head>
44     <body>
45         <from action="" method="post">
46             <table cellspacing="0px">
47                 <tr>
48                     <td>邮箱:</td>
49                     <td>
50                         <input type="text" id="mail" />
51                     </td>
52                 </tr>
53                 <tr>
54                     <td>登录用户名:</td>  
55                     <td>
56                         <input type="text" id="name"/>
57                     </td>
58                 </tr>
59                 <tr>
60                     <td>显示名称:</td>   
61                     <td>
62                         <input type="text" />
63                     </td>
64                 </tr>
65                 <tr>
66                     <td>密码:</td>      
67                     <td>
68                         <input type="password" id="pwd1" />
69                     </td>
70                 </tr>
71                 <tr>
72                     <td>确认密码:</td>   
73                     <td>
74                         <input type="password" id="pwd2" />
75                     </td>
76                 </tr>
77                 <tr>
78                     <td>出生日期：</td>
79                     <td>
80                         <input type="date" id="riqi"/>
81                     </td>
82                 </tr>
83                 
84                 <tr>
85                     <td colspan="2" align="center">
86                         <input type="button" value="注册" id="login"/>
87                     </td>
88                 </tr>
89             </table>
90             
91         </from>
92     </body>
93 </html>