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 }
时间： 2024-08-15 02:51:10