一、正则表达的目标：
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-z\d]{4,10}$/i;
26 if(reg2.test(pwd1)==false){
27 alert(‘密码验证失败‘)
28 }
29 else{
30 alert(‘密码验证成功‘)
31 }
32 var reg3=/^(19\d{2}|200\d)-(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>
时间： 2024-08-10 01:59:49