1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>25完整的表单验证</title> 7 <script type="text/javascript"> 8 /* 9 10 需求： 1.用户名不能为空 11 2.用户名长度为6-14 12 3.密码不能为空 13 4.密码长度不能小于6 14 5.确认密码要与密码一致 15 16 */ 17 18 //首先为String类扩展trim方法用来去除首尾空格 19 String.prototype.trim=function(){ 20 21 return this.replace(/^s+/,"").replace(/+$/,""); 22 23 } 24 25 function checkUsername(username){//检查用户名是否符合要求 26 27 var flag=false; 28 username=username.trim();//将用户名首尾空格去掉 29 var usernameError=document.getElementById("usernameError");//获取span对象，用来展示用户名错误信息 30 31 if(username.length==0){ 32 33 usernameError.innerHTML="<font color='red'>用户名不能为空</font>"; 34 flag=false; 35 36 }else if(username.length<6||username.length>14){ 37 38 usernameError.innerHTML="<font color='red'>用户名长度为6-14之间</font>" 39 flag=false; 40 41 }else{ 42 43 usernameError.innerHTML=""; 44 flag=true; 45 46 } 47 return flag; 48 } 49 50 function clearUsernameError(){//当输入用户名的文本框获得焦点则清楚用户名错误信息 51 52 var usernameError=document.getElementById("usernameError"); 53 usernameError.innerHTML=""; 54 55 } 56 57 function checkPwd(pwd){//检查密码是否符合要求 58 59 var flag=false; 60 var pwdError=document.getElementById("pwdError");//获取span对象，用来展示密码错误信息 61 62 if(pwd.length==0){ 63 64 pwdError.innerHTML="<font color='red'>密码不能为空</font>" 65 flag=false; 66 67 }else if(pwd.length<6){ 68 69 pwdError.innerHTML="<font color='red'>密码长度不可以小于6</font>" 70 flag=false; 71 72 }else{ 73 74 pwdError.innerHTML=""; 75 flag=true; 76 77 } 78 return flag; 79 } 80 81 function clearPwdError(){//当输入密码的文本框获得焦点的时候，清楚密码错误信息 82 83 var pwdError=document.getElementById("pwdError"); 84 pwdError.innerHTML=""; 85 86 } 87 88 function checkSame(conformPwd){//检查验密码与密码是否一致 89 90 var flag=false; 91 var pwd=document.getElementById("pwd").value;//获取密码值 92 var conformPwdError=document.getElementById("conformPwdError"); 93 if(pwd!=conformPwd){//若两次面不一致，则出现错误信息 94 95 conformPwdError.innerHTML="<font color='red'>两次密码不一致</font>" 96 flag=false; 97 98 }else{ 99 100 conformPwdError.innerHTML=""; 101 flag=true; 102 103 } 104 return flag; 105 } 106 107 function clearConformPwdError(){//当第二次输出密码的文本框获得焦点的时候，则清除展示两次密码不一样的信息 108 109 var conformPwdError=document.getElementById("conformPwdError"); 110 conformPwdError.innerHTML=""; 111 } 112 113 function checkAll(){ 114 115 var username=document.getElementById("username").value; 116 var pwd=document.getElementById("pwd").value; 117 var conformPwd=document.getElementById("conformPwd").value; 118 119 if(checkUsername(username)&&checkPwd(pwd)&&checkSame(conformPwd)){ 120 121 document.forms["userForm"].action="http://localhost:8080/oa/register"; 122 document.forms["userForm"].method="get"; 123 document.forms["userForm"].submit(); 124 125 } 126 127 } 128 129 </script> 130 </head> 131 132 133 <body> 134 135 <form name="userForm"> 136 137 用户名 138 <input type="text" name="username" id="username" onblur="checkUsername(this.value)" onfocus="clearUsernameError()"/> 139 <span id="usernameError"></span> 140 </br> 141 密码 142 <input type="password" name="pwd" id="pwd" onblur="checkPwd(this.value)" onfocus="clearPwdError()"/> 143 <span id="pwdError"></span> 144 </br> 145 确认密码 146 <input type="password" name="conformPwd" id="conformPwd" onblur="checkSame(this.value)" onfocus="clearConformPwdError()"/> 147 <span id="conformPwdError"></span> 148 </br> 149 150 <input type="button" value="注册" onclick="checkAll()" /> 151 </form> 152 153 </body> 154 </html>