Summary of submission and verification methods
1. Use submit button, combined with onsubmit event to implement (most commonly used)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <script type="text/javascript"> function checkForm() { //判断用户名是否为空 if(document.form1.username.value=="") { window.alert("用户名不能为空!"); return false; }else { window.alert("验证通过!"); return true; } } </script> </head> <body> <form name="form1" method="post" action="login.php" onsubmit="return checkForm()"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="userpwd" /> <input type="submit" value="提交表单" /> </form> </body> </html>
2. Submit button , combined with the onclick event, to achieve form verification and submission
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <script type="text/javascript"> function checkForm() { //判断用户名是否为空 if(document.form1.username.value=="") { window.alert("用户名不能为空!"); }else { window.alert("验证通过!"); } } </script> </head> <body> <form name="form1" method="post" action="login.php"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="userpwd" /> <input type="submit" value="提交表单" onclick="checkForm()" /> </form> </body> </html>
3. button button ( Ordinary button), combined with the submit() method to implement form verification submission
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <script type="text/javascript"> function checkForm() { if(document.form1.username.value.length == 0) { //如果用户名为空 window.alert("用户名不能为空!"); }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20) { //如果用户名长度小于5或大于20 window.alert("用户名只能介于5-20个字符!"); }else if(checkOtherChar(document.form1.username.value)) { //如果用户名含有特殊符号 window.alert("用户名中含有特殊符号!"); }else { //如果验证通过,提交表单 window.alert("验证通过!"); //表单提交方法 document.form1.submit(); } } function checkOtherChar(str) { //定义一个特殊符号的数组 var arr = ["*","&","<",">","$","\","/"]; //循环比较:数组中的每一个字符,与用户名每一个字符进行比对 for(var i=0;i<arr.length;i++) { for(var j=0;j<str.length;j++) { if(arr[i]==str.charAt(j)) { return true; } } } //如果没找到 return false; } </script> </head> <body> <form name="form1" method="post" action="login.php"> 用户名:<input type="text" name="username" /> 密码:<input type="password" name="userpwd" /> <input type="button" value="提交按钮" onclick="checkForm()" /> </form> </body> </html>