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>
阅读全文
1 0
- J2EE进阶之onsubmit表单提交 五
- onsubmit阻止表单提交
- OnSubmit阻止表单提交
- onsubmit阻止表单提交
- jquery onsubmit 表单提交判断
- 表单的提交onsubmit事件
- js form onsubmit 表单提交
- onsubmit用来表单的提交
- onsubmit="false"可以阻止表单提交
- form 表单提交 submit与onsubmit 区别
- html form onsubmit表单提交的问题
- Form表单提交onSubmit return false失效
- 表单提交过程中的onsubmit()和onclick()
- 表单防止自动提交及onSubmit解析
- onsubmit 判断是表单是否提交
- 表单提交 onsubmit="return false"
- onsubmit阻止表单提交的一种方式
- form表单提交onclick和onsubmit
- 1、编码器的简单认识
- Entity Framework Code Firs 数据迁移与更新
- hibernate5(1)新特性展示
- LAMP搭建——apache安装
- 剑指offer中atoi()函数的实现
- J2EE进阶之onsubmit表单提交 五
- 牛x的大甲方信息系统为啥对自动化巡检情有独钟
- 最常用的15大Eclipse开发快捷键技巧
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- 内外网双网卡配置
- Linux下的C语言函数perror
- Git的使用(一些常用命令)
- 171. Excel Sheet Column Number/168. Excel Sheet Column Title(Java/C++)
- 二进制中的1的个数