onsubmit事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了onsubmit事件相关的知识，希望对你有一定的参考价值。
一、onsbumit事件简介
控制表单的提交。
1.需要将onsubmit事件作用在表单上。<form action=""onsubmit=""></form>
2.值的写法：onsubmit="return 函数名()"
3.函数名() 必须有返回值，必须返回true或者false。
如果返回的是true，表单可以提交；
如果返回的是false，表单不能提交。
默认是true，默认表单提交。
函数名()的逻辑写的是表单的校验。
二、例子
<!DOCTYPE html> <html> <head> <title>表单注册</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> //给出用户名的提示 function run1(){ var uspan = document.getElementById("uspan"); uspan.innerHTML = "不能输入特殊字符"; } //表单校验，必须有返回值 function run(){ //校验用户名 var name = document.getElementById("nameId").value; if(name =="" || name.length == 0){ var uspan = document.getElementById("uspan"); uspan.innerHTML = "用户名不能为空"; return false; } //校验密码 var password = document.getElementById("pwdId").value; if(password =="" || password.length <6){ var pspan = document.getElementById("pspan"); pspan.innerHTML = "密码不能为空，且密码不能小于6位"; return false; } //确认密码 var repassword = document.getElementById("repwdId").value; if(repassword =="" || repassword.length <6){ var rpspan = document.getElementById("rpspan"); rpspan.innerHTML = "确认密码不能为空，且密码不能小于6位"; return false; }else if(repassword != password){ var rpspan = document.getElementById("rpspan"); rpspan.innerHTML = "确认密码和密码不同"; return false; } //邮箱 var email = document.getElementById("emailId").value; if(!/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(email)){ var espan = document.getElementById("espan"); espan.innerHTML = "邮箱错误"; return false; } return true; } </script> </head> <body> <form action="success.html" method="post" onsubmit="return run()"> <table > <tr> <td>输入姓名</td> <td> <input type="text" name="username" id="nameId" onfocus="run1();"/><span id="uspan"></span> </td> </tr> <tr> <td>输入密码</td> <td> <input type="password" name="password" id="pwdId"/><span id="pspan"></span> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" name="repassword" id="repwdId"/><span id="rpspan"></span> </td> </tr> <tr> <td>输入邮箱</td> <td> <input type="text" name="email" id="emailId" /><span id="espan"></span> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"/> </td> </tr> </table> </form> </body> </html>
<!DOCTYPE html> <html> <head> <title>successl.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <h1>注册成功</h1> </body> </html>
本文出自 “11831428” 博客，请务必保留此出处http://11841428.blog.51cto.com/11831428/1900312
以上是关于onsubmit事件的主要内容，如果未能解决你的问题，请参考以下文章