JS-表单验证
表单验证需求：
1、所有表单项需要即时验证，最好是用户写一个验证一个
2、所有表单项当验证失败的时候提示错误消息，并且错误消息显示到组建的后面，红色字体，要求12号
3、当表单验证成功之后不提示消息
4、当只要表单项验证失败，阻止其提交表单
5、用户名不能为空
6、用户名长度必须在6-14位
7、密码和确认密码必须一致
注意：blur:失去焦点
focus:获取焦点
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>表单验证</title> 10 </head> 11 <body> 12 <!-- 13 //name属性取消之后提交表单时则不会提交这个数据 14 --> 15 <script type="text/javascript"> 16 function checkName(userName){ 17 var ok=true; 18 var userName=document.getElementById("userName").value; 19 var userName=userName.trim(); 20 var spanName=document.getElementById("spanName") 21 if(userName==""){//如果为空，提示用户名错误 22 ok=false 23 spanName.innerHTML="用户名不能为空！" 24 }else{ 25 if(userName.length<6||userName.length>14){//用户名长度不在6-14位之间 26 spanName.innerHTML="用户名必须在6-14位之间！" 27 ok=false 28 }else 29 spanName.innerHTML="" 30 ok=true 31 } 32 return ok 33 } 34 function newUserName(){ 35 //获取焦点 36 var spanName=document.getElementById("spanName") 37 spanName.innerHTML="" 38 } 39 function checkPwd(){ 40 var ok=true 41 var pwd=document.getElementById("pwd").value; 42 var checkPassword=document.getElementById("checkPassword").value; 43 var spanPwd=document.getElementById("spanPwd"); 44 if(pwd!=checkPassword){//密码不一致 45 ok=false 46 spanPwd.innerHTML="密码不一致" 47 }else{//密码一致 48 spanPwd.innerHTML="" 49 ok=true 50 } 51 return ok 52 } 53 function newPwd(){ 54 var spanPwd=document.getElementById("spanPwd"); 55 if(spanPwd.innerHTML!=""){ 56 document.getElementById("pwd").value=""; 57 document.getElementById("checkPassword").value=""; 58 } 59 60 spanPwd.innerHTML="" 61 } 62 function formsubmit(){//如果用户名和密码填写正确则提交表单 63 var userName=document.getElementById("userName").value; 64 if(checkName(userName)&&checkPwd()){ 65 var formsubmit=document.getElementById("formsubmit") 66 //submit是form表单的一个方法 67 formsubmit.submit(); 68 } 69 } 70 </script> 71 <form method="get" action="192.168.110.1" id="formsubmit"> 72 用户名： 73 <input type="text" id="userName" onblur="checkName(this.value)" onfocus="newUserName()"> 74 <span id="spanName" style="color:red;font-size:12px"></span><br> 75 密码： 76 <input type="password" id="pwd" onfocus="newPwd()"><br> 77 确认密码： 78 <input type="password" id="checkPassword" name="checkPassword" onblur="checkPwd();" onfocus="newPwd()"> 79 <span id="spanPwd" style="color:red;font-size:12px"></span><br> 80 81 <input type="button" value="注册" onclick="formsubmit()"> 82 </form> 83 </body> 84 </html>
