标签：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="style.css"> 6 <script type="text/javascript" src="js.js"></script> 7 </head> 8 9 <body> 10 <form> 11 <!--会员名--> 12 <div> 13 <label> 14 <span>会员名：</span> 15 <input type="text" class="text" /> 16 </label> 17 <p class="msg"> 18 <i></i> 19 5-25个字符，一个汉字为两个字符，推荐使用中文会员名 20 </p> 21 </div> 22 <div> 23 <label> 24 <span></span> 25 <b id="count">0个字符</b> 26 </label> 27 </div> 28 29 <!--密码--> 30 <div> 31 <label> 32 <span>登陆密码：</span> 33 <input type="password" class="text" /> 34 </label> 35 <p class="msg"> 36 <i></i> 37 5-25个字符，一个汉字为两个字符，推荐使用中文会员名 38 </p> 39 </div> 40 41 <div style="margin:3px 0 10px 0"> 42 <label> 43 <span></span> 44 <em class="active">弱</em> 45 <em>中</em> 46 <em>强</em> 47 </label> 48 </div> 49 50 <!--确认密码--> 51 <div style="padding-bottom:20px"> 52 <label> 53 <span>确认密码：</span> 54 <input type="password" class="text disabled=" /> 55 </label> 56 <p class="msg"> 57 <i></i> 58 请再输一次 59 </p> 60 </div> 61 62 <!--验证码--> 63 <div> 64 <label> 65 <span>验证码：</span> 66 <input type="text" class="text" style="width:50px" /> 67 <img class="ver_img" src="#"> 68 <a class="changeimg" href="#" title="重新获取验证码"></a> 69 </label> 70 </div> 71 72 <!--提交按钮--> 73 <div> 74 <input class="submitBtn btn" type="submit" value="同意协议并注册"> 75 </div> 76 77 </form> 78 </body> 79 </html>
js代码：
1 function getLength(str){ 2 3 return str.replace(/[^\x00-xff]/g,"xx").length; //双字节字符,获取汉字长度 4 } 5 6 //判断是否全都使用相同字符 7 function findStr(str,n){ 8 var tmp = 0; 9 for(var i=0;i<str.length;i++){ 10 if(str.charAt(i)==n){ 11 tmp++; 12 } 13 } 14 return tmp; 15 } 16 17 window.onload = function(){ 18 var aInput = document.getElementsByTagName(‘input‘); 19 var oName = aInput[0]; 20 var pwd = aInput[1]; 21 var pwd2 = aInput[2]; 22 var aP = document.getElementsByTagName(‘p‘); 23 var name_msg = aP[0]; 24 var pwd_msg = aP[1]; 25 var pwd2_msg = aP[2]; 26 var count = document.getElementById(‘count‘); 27 var aEm = document.getElementsByTagName(‘em‘); 28 29 var name_length = 0; 30 31 //用户名匹配 32 //1.数字、字母（不区分大小写）、汉字，下划线 33 //2.5-25个字符，推荐使用中文名 34 //3.\u4e00-\u9fa5 35 var re = /[^\w\u4e00-\u9fa5]/g; 36 37 //*********************用户名************************* 38 oName.onfocus = function(){ 39 name_msg.style.display = "block"; 40 name_msg.innerHTML = ‘<i class="ati"></i>5-25个字符，一个汉字为两个字符，推荐使用中文会员名‘; 41 } 42 43 oName.onkeyup = function(){ 44 count.style.visibility = "visible"; 45 name_length = getLength(this.value); 46 count.innerHTML = name_length+"个字符"; 47 if(name_length==0){ 48 count.style.visibility = "hidden"; 49 } 50 51 } 52 53 //鼠标离开输入框时判断 54 oName.onblur = function(){ 55 //含有非法字符 56 var re = /[^\x00-xff]/g; 57 if(re.test(this.value)){ 58 name_msg.innerHTML = ‘<i class="err"></i>含有非法字符‘; 59 } 60 //不能为空 61 else if(name_length==0){ 62 name_msg.innerHTML = ‘<i class="err"></i>不能为空‘; 63 } 64 //长度超过25个字符 65 else if(name_length>25){ 66 name_msg.innerHTML = ‘<i class="err"></i>长度超过25个字符‘; 67 } 68 //长度少于6个字符 69 else if(name_length<6){ 70 name_msg.innerHTML = ‘<i class="err"></i>长度少于6个字符‘; 71 } 72 //OK 73 else{ 74 name_msg.innerHTML = ‘<i class="OK"></i>OK‘; 75 } 76 } 77 78 //*********************密码************************* 79 pwd.onfocus = function (){ 80 pwd_msg.style.display = "block"; 81 pwd_msg.innerHTML = ‘<i class="ati></i>6~16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号‘; 82 } 83 pwd.onkeyup = function (){ 84 //密码长度大于5强度为中 85 if(this.value.length>5){ 86 aEm[1].className = "active"; 87 pwd2.removeAttribute("disabled"); 88 pwd2_msg.style.display = "block"; 89 }else{ 90 aEm[1].className = ""; 91 pwd2.setAttribute("disabled"); 92 pwd2_msg.style.display = "none"; 93 } 94 //密码长度大于10强度为强 95 if(this.value.length>10){ 96 aEm[2].className = "active"; 97 pwd2.removeAttribute("disabled"); 98 pwd2_msg.style.display = "block"; 99 } 100 } 101 102 pwd.onblur = function (){ 103 104 var m = findStr(pwd.value,pwd.value[0]); 105 var re_n = /[^\d]/g; 106 var re_t = /[^a-zA-Z]/g; 107 //不能为空 108 if(this.value==""){ 109 pwd_msg.innerHTML = ‘<i class="err"></i>长度不能不空‘; 110 } 111 //不能使用相同字符 112 else if(m==this.value.length){ 113 pwd_msg.innerHTML = ‘<i class="err"></i>不能使用相同字符‘; 114 } 115 //长度应为6-16个字符 116 else if(this.value.length<6||this.value.length>16){ 117 pwd_msg.innerHTML = ‘<i class="err"></i>长度应为6到16个字符‘; 118 } 119 //不能全为数字 120 else if(!re_n.test(this.value)){ 121 pwd_msg.innerHTML = ‘<i class="err"></i>不能全为数字‘; 122 123 } 124 //不能全为字母 125 else if(!re_t.test(this.value)){ 126 pwd_msg.innerHTML = ‘<i class="err"></i>不能全为字母‘; 127 }else{ 128 pwd_msg.innerHTML = ‘<i class="ok"></i>OK‘; 129 } 130 //OK 131 } 132 133 //*********************确认密码********************** 134 135 pwd2.onblur = function(){ 136 if(this.value!=pwd.value){ 137 pwd2_msg.innerHTML = ‘<i class="err"></i>两次输入的密码不一致‘; 138 }else { 139 pwd2_msg.innerHTML = ‘<i class="ok"></i>OK‘; 140 } 141 } 142 }
标签：
原文地址：http://www.cnblogs.com/wx1993/p/4638812.html
