J2EE进阶之onsubmit表单提交五

╰+哭是因爲堅強的太久メ 2024-02-17 23:21 51阅读 0赞

### 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>

效果截图：  
![mbyvoz4.jpg][]

### 通过js提交表单 ###

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

demo

[mbyvoz4.jpg]: http://i.imgur.com/mbyvoz4.jpg