J2EE进阶之onsubmit表单提交五_javaee做表单-CSDN博客

本文链接：https://blog.csdn.net/onceing/article/details/75113993

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>