J2EE进阶之onsubmit表单提交 五

来源:互联网 发布:人工智能机械假肢感应 编辑:程序博客网 时间:2024/06/01 07:55

onsubmit事件

    * 控制表单的提交    * onsubmit事件        * 写法:作用在form表单上            * 值的写法:return 方法名称            * 方法:要有返回值,返回true或者false            * 默认返回true

实现用户注册demo

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  2 <html>  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  5 <title>Insert title here</title>  6       7     <script type="text/javascript">  8         /*   9             * onsubmit事件 10                 * 写法:作用在form表单上 11                     * 值的写法:return 方法名称 12                     * 方法:要有返回值,返回true或者false 13                     * 默认返回true 14         */ 15          16         // 用户名提示 17         function run1(){ 18             var uspan = document.getElementById("uspan"); 19             uspan.innerHTML = "请是输入姓名"; 20         } 21          22         // 控制表单提交 23         function run(){ 24             // 用户名不为空 25             var name = document.getElementById("nameId").value; 26             // 用户名不能为空 27             if(name == "" || name.length == 0){ 28                 // 给用户提示 29                 var uspan = document.getElementById("uspan"); 30                 uspan.innerHTML = "用户名不能为空"; 31                 // 返回值 32                 return false; 33             } 34              35             // 校验密码 36             var pwd = document.getElementById("pwdId").value; 37             if(pwd == "" || pwd.length < 6){ 38                 var pspan = document.getElementById("pspan"); 39                 pspan.innerHTML = "密码至少6位"; 40                 return false; 41             } 42              43             var repwd = document.getElementById("repwdId").value; 44             if(repwd != pwd){ 45                 var rpspan = document.getElementById("rpspan"); 46                 rpspan.innerHTML = "您两次输入的密码不一致"; 47                 return false; 48             } 49              50             // 校验邮箱 xxx@163.com 51             var email = document.getElementById("emailId").value; 52             if(emailId == "" ||  !/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){ 53                 var espan = document.getElementById("espan"); 54                 espan.innerHTML = "您的邮箱格式不正确"; 55                 return false; 56             } 57              58         } 59      60     </script> 61  62 </head> 63 <body> 64     <form action="success.html" method="post" onsubmit="return run()"> 65         <table border="1" width="60%" cellpadding="10" align="center"> 66             <tr> 67                 <td>输入姓名</td> 68                 <td> 69                     <input type="text" name="username" id="nameId" onfocus="run1()"/><span id="uspan"></span> 70                 </td> 71             </tr> 72             <tr> 73                 <td>输入密码</td> 74                 <td> 75                     <input type="password" name="password" id="pwdId" /><span id="pspan"></span> 76                 </td> 77             </tr> 78             <tr> 79                 <td>确认密码</td> 80                 <td> 81                     <input type="password" name="repassword" id="repwdId" /><span id="rpspan"></span> 82                 </td> 83             </tr> 84             <tr> 85                 <td>输入邮箱</td> 86                 <td> 87                     <input type="text" name="email" id="emailId" /><span id="espan"></span> 88                 </td> 89             </tr> 90             <tr align="center"> 91                 <td colspan="2"> 92                     <input type="submit" value="注册" /> 93                 </td> 94             </tr> 95         </table> 96     </form> 97  98 </body> 99 </html>

效果截图:

通过js提交表单

        // var form = document.getElementById("formId");        var form = document.form1;        form.action = "success.html";        form.method = "get";        form.submit();

demo

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  2 <html>  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  5 <title>Insert title here</title>  6       7     <script type="text/javascript">  8         // 提交表单  9         function run(){ 10             // var form = document.getElementById("formId"); 11             var form = document.form1; 12             form.action = "success.html"; 13             form.method = "get"; 14             form.submit(); 15         } 16          17     </script> 18      19 </head> 20 <body> 21      22     <form  id="formId" name="form1"> 23         <table border="1" width="60%" cellpadding="10" align="center"> 24             <tr> 25                 <td>输入姓名</td> 26                 <td> 27                     <input type="text" name="username" id="nameId" onfocus="run1()"/><span id="uspan"></span> 28                 </td> 29             </tr> 30             <tr> 31                 <td>输入密码</td> 32                 <td> 33                     <input type="password" name="password" id="pwdId" /><span id="pspan"></span> 34                 </td> 35             </tr> 36             <tr> 37                 <td>确认密码</td> 38                 <td> 39                     <input type="password" name="repassword" id="repwdId" /><span id="rpspan"></span> 40                 </td> 41             </tr> 42             <tr> 43                 <td>输入邮箱</td> 44                 <td> 45                     <input type="text" name="email" id="emailId" /><span id="espan"></span> 46                 </td> 47             </tr> 48             <tr align="center"> 49                 <td colspan="2"> 50                     <input type="button" value="注册" onclick="run()"/> 51                     <input type="submit" value="注册2" /> 52                 </td> 53             </tr> 54         </table> 55     </form> 56      57      58     <form action=""> 59          60     </form> 61  62 </body> 63  64 </html>
原创粉丝点击