1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>示例-表单校验-涉及的正则校验</title>
6 <style type="text/css">
7
8 </style>
9 </head>
10
11 <body>
12
13 <script type="text/javascript">
14
15 function checkUser(){
16 var flag;
17
18 var oUserNode = document.getElementsByName("user")[0];
19
20 var name =oUserNode.value;
21
22 //定义正则表达式
23 var reg = new RegExp("^[a-z]{4}$","i");
24
25 var oSpanNode = document.getElementById( "userspan");//必须是四个字母
26
27 //reg = new RegExp("^[0-9]{4}$","i");//必须是四个数字
28
29 if(reg.test(name)){
30
31 oSpanNode.innerHTML ="用户名正确".fontcolor("green");
32 flag =true;
33 }
34 else{
35 oSpanNode.innerHTML ="用户名错误".fontcolor("red");
36 flag =false;
37 }
38 }
39
40 //提交事件处理
41 function checkFrom(){
42 if(checkUser())
43 return true;
44 return false;
45 }
46
47 //提交事件处理
48 function mySubmit(){
49 var oFormNode =document.getElementById("userinfo");
50
51 oFormNode.submit();
52 }
53 </script>
54 <!--表单校验-->
55 <form id="userinfo" onsubmit="return checkFrom()">
56 用户名称:<input type="text" name="user" onblur="checkUser()" />
57 <span id="userspan"></span>
58 <br/>
59 输入密码:<input type="password" name=" psw" /><br/>
60 <input type="submit" value="提交数据" />
61 </form>
62 <!--自定义提交按钮-->
63 <input type="button" value="我的提交" onclick="mySubmit()" />
64
65
66
67 </body>
68 </html>