J2EE进阶之onsubmit表单提交 五
16lz
2021-01-22
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>
更多相关文章
- jquery入门-$.each 数组操作与表单操作代码
- 的良好实践是什么?它可以替换还是只用于表单?
- 【ASP.NET Web API教程】5.2 发送HTML表单数据：URL编码的表单数据
- html5表单与PHP交互
- PHP表单在Internet Explorer中不起作用
- 如何使用jQuery在我的网站演示中自动填写表单，好像真人正在打字？
- 禁用div中的所有表单元素
- 在HTML / PHP联系表单上出现404/405错误（链接问题？）
- JSF和HTML表单的Unicode问题？