示例-表单校验-表单提交的两种方式

 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>
View Code

 

posted @ 2014-06-13 00:42  是但哥  阅读(258)  评论(0)    收藏  举报