第一百五十节，封装库JavaScript，表单验证密码验证

<div id&＃61;"reg"><h2 class&＃61;"tuo"><img src&＃61;"img/close.png" alt&＃61;"" class&＃61;"close" />会员注册h2><form name&＃61;"reg"><dl><dd>用 户 名&＃xff1a; <input type&＃61;"text" name&＃61;"user" class&＃61;"text"/><span class&＃61;"info info_user">请输入用户名&＃xff0c;4~20位&＃xff0c;由字母、数字和下划线组成&＃xff01;span><span class&＃61;"error error_user">输入不合法&＃xff0c;请重新输入&＃xff01;span><span class&＃61;"succ succ_user">可用span>dd><dd>密　　码&＃xff1a; <input type&＃61;"password" name&＃61;"pass" class&＃61;"text"/><span class&＃61;"info info_pass"><p>安全级别&＃xff1a;<strong class&＃61;"s s1">■strong><strong class&＃61;"s s2">■strong><strongclass&＃61;"s s3">■strong> <strong class&＃61;"s s4" style&＃61;"font-weight:normal;">strong>p><p><strong class&＃61;"q1" style&＃61;"font-weight:normal;">○strong> 6-20 个字符p><p><strong class&＃61;"q2" style&＃61;"font-weight:normal;">○strong> 只能包含大小写字母、数字和非空格字符p><p><strong class&＃61;"q3" style&＃61;"font-weight:normal;">○strong> 大、小写字母、数字、非空字符&＃xff0c;2种以上p>span><span class&＃61;"error error_pass">输入不合法&＃xff0c;请重新输入&＃xff01;span><span class&＃61;"succ succ_pass">可用span>dd><dd>密码确认&＃xff1a; <input type&＃61;"password" name&＃61;"notpass" class&＃61;"text"/>dd><dd><span style&＃61;"vertical-align:-2px">提　　问&＃xff1a;span> <select name&＃61;"ques"><option value&＃61;"0">- - - - 请选择 - - - -option><option value&＃61;"1">- - 您最喜欢吃的菜option><option value&＃61;"2">- - 您的狗狗的名字option><option value&＃61;"3">- - 您的出生地option><option value&＃61;"4">- - 您最喜欢的明星option>select>dd><dd>回　　答&＃xff1a; <input type&＃61;"text" name&＃61;"ans" class&＃61;"text"/>dd><dd>电子邮件&＃xff1a; <input type&＃61;"text" name&＃61;"email" class&＃61;"text"/>dd><dd class&＃61;"birthday"><span style&＃61;"vertical-align:-2px">生　　日&＃xff1a;span> <select name&＃61;"year"><option value&＃61;"0">- 请选择 -option>select> 年<select name&＃61;"month"><option value&＃61;"0">- 请选择 -option>select> 月<select name&＃61;"day"><option value&＃61;"0">- 请选择 -option>select> 日dd><dd style&＃61;"height:105px;"><span style&＃61;"vertical-align:85px">备　　注&＃xff1a;span> <textarea name&＃61;"ps">textarea>dd><dd style&＃61;"padding:0 0 0 320px;">还可以输入200字dd><dd style&＃61;"padding:0 0 0 80px;"><input type&＃61;"button" class&＃61;"submit"/>dd>dl>form>
div>

/*注册*/
#reg {width:600px;height:550px;border:1px solid #ccc;position:absolute;display:none;z-index:9999;background:#fff;
}
#reg h2 {height:40px;line-height:40px;text-align:center;font-size:14px;letter-spacing:1px;color:#666;background:url(img/login_header.png) repeat-x;margin:0;padding:0;border-bottom:1px solid #ccc;margin:0 0 20px 0;cursor:move;
}
#reg h2 img {float:right;position:relative;top:14px;right:8px;cursor:pointer;
}
#reg dl {font-size:14px;color:#666;margin:20px;padding:0 0 0 10px;
}
#reg dl dd {height:30px;padding:5px 0;
}
#reg dl dd input.text, #reg dl dd select {width:200px;height:25px;border:1px solid #ccc;background:#fff;font-size:14px;color:#666;
}
#reg dl dd select {width:202px;
}
#reg dl dd.birthday select {width:100px;
}
#reg dl dd textarea {width:360px;height:100px;background:#fff;border:1px solid #ccc;
}
#reg dl dd input.submit {width:143px;height:33px;background:url(img/reg.png) no-repeat;border:none;cursor:pointer;
}/*注册提示*/
/*用户名提示*/
#reg dl dd span.info, #reg dl dd span.error, #reg dl dd span.succ {display:block;font-size:12px;color:#333;width:165px;height:32px;line-height:32px;padding:0 0 0 35px;position:absolute;letter-spacing:1px;display:none;
}
#reg dl dd span.info {background:url(img/reg_info.png) no-repeat;
}
#reg dl dd span.error {background:url(img/reg_error.png) no-repeat;
}
#reg dl dd span.succ {height:14px;line-height:14px;background:url(img/reg_succ.png) no-repeat;padding:0 0 0 20px;color:green;
}
/*输入*/
#reg dl dd span.info_user {height:43px;line-height:18px;padding-top:7px;background:url(img/reg_info2.png) no-repeat;top:60px;left:310px;/*display:block;*/
}
/*错误*/
#reg dl dd span.error_user {top:60px;left:310px;/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_user {top:70px;left:315px;/*display:block;*/
}/*密码验证*/
#reg dl dd span.info_pass {width:244px;height:102px;padding:4px 0 0 16px;background:url(img/reg_info3.png) no-repeat;top:60px;left:310px;/*display:block;*/letter-spacing:0;
}
#reg dl dd span.info_pass p {height:25px;line-height:25px;color:#666;
}
#reg dl dd span.info_pass p strong.s {color:#ccc;
}
#reg dl dd span.error_pass {top:43px;left:295px;
}
#reg dl dd span.succ_pass {top:52px;left:295px;
}
/*错误*/
#reg dl dd span.error_pass {top:110px;left:310px;/*display:block;*/
}
/*可用*/
#reg dl dd span.succ_pass {top:110px;left:315px;/*display:block;*/
}
#reg .info_pass strong{font-size: 25px;
}

//验证密码$(&＃39;form&＃39;).hq_form_name(&＃39;pass&＃39;).yuan_su_shi_jian(&＃39;focus&＃39;, function () { //获取密码框&＃xff0c;添加聚集光标事件$(&＃39;#reg .info_pass&＃39;).xian_shi(); //聚集光标时显示提示$(&＃39;#reg .error_pass&＃39;).yin_cang();$(&＃39;#reg .succ_pass&＃39;).yin_cang();}).yuan_su_shi_jian(&＃39;blur&＃39;, function () { //光标离开事件if (trim($(this).hq_value()) &＃61;&＃61; &＃39;&＃39;) {$(&＃39;#reg .info_pass&＃39;).yin_cang();} else {if (qiang_yanzh(this)) {$(&＃39;#reg .succ_pass&＃39;).xian_shi();$(&＃39;#reg .info_pass&＃39;).yin_cang();$(&＃39;#reg .error_pass&＃39;).yin_cang();} else {$(&＃39;#reg .succ_pass&＃39;).yin_cang();$(&＃39;#reg .info_pass&＃39;).yin_cang();$(&＃39;#reg .error_pass&＃39;).xian_shi();}}});//密码强度验证$(&＃39;form&＃39;).hq_form_name(&＃39;pass&＃39;).yuan_su_shi_jian(&＃39;keyup&＃39;,function () { //按下键盘键放开时事件qiang_yanzh(this);});function qiang_yanzh(_this) {var neirong &＃61; trim($(_this).hq_value()); //获取输入的字符var chuang &＃61; neirong.length; //获取输入的字符长度var fuza &＃61; 0; //计数器&＃xff0c;同级密码的复杂性var flag &＃61; false; //统计用户输入是否合法//第一个必须条件验证6至20位之间if (chuang >&＃61; 6 && chuang <&＃61; 20){$(&＃39;#reg .info_pass .q1&＃39;).wen_ben(&＃39;●&＃39;).c_css(&＃39;color&＃39;,&＃39;#008000&＃39;);}else {$(&＃39;#reg .info_pass .q1&＃39;).wen_ben(&＃39;○&＃39;).c_css(&＃39;color&＃39;,&＃39;#666&＃39;);}//第二个必须条件大小写字母、数字和非空格字符&＃xff0c;任意一个即可满足if (chuang > 0 && !/\s/.test(neirong)) {$(&＃39;#reg .info_pass .q2&＃39;).wen_ben(&＃39;●&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;);} else {$(&＃39;#reg .info_pass .q2&＃39;).wen_ben(&＃39;○&＃39;).c_css(&＃39;color&＃39;, &＃39;#666&＃39;);}//第三个必须条件大、小写字母、数字、非空字符&＃xff0c;2种以上if (/[0-9]/.test(neirong)){ //判断是否输入了数字fuza &＃43;&＃43;;}if (/[a-z]/.test(neirong)){ //判断是否输入了小写字母fuza &＃43;&＃43;;}if (/[A-Z]/.test(neirong)){ //判断是否输入了大写字母fuza &＃43;&＃43;;}if (/[^0-9a-zA-Z]/.test(neirong)){ //判断是否输入了特殊字符fuza &＃43;&＃43;;}if (fuza >&＃61; 2){$(&＃39;#reg .info_pass .q3&＃39;).wen_ben(&＃39;●&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;);}else {$(&＃39;#reg .info_pass .q3&＃39;).wen_ben(&＃39;○&＃39;).c_css(&＃39;color&＃39;, &＃39;#666&＃39;);}//安全级别判断//判断等级务必从高数值到低数值判断。防止高数值无法判断if (chuang >&＃61; 10 && fuza >&＃61; 3) {$(&＃39;#reg .info_pass .s1&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;);$(&＃39;#reg .info_pass .s2&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;);$(&＃39;#reg .info_pass .s3&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;);$(&＃39;#reg .info_pass .s4&＃39;).c_css(&＃39;color&＃39;, &＃39;#008000&＃39;).wen_ben(&＃39;高&＃39;);}else if(chuang >&＃61; 8 && fuza >&＃61; 2){$(&＃39;#reg .info_pass .s1&＃39;).c_css(&＃39;color&＃39;, &＃39;#FF6600&＃39;);$(&＃39;#reg .info_pass .s2&＃39;).c_css(&＃39;color&＃39;, &＃39;#FF6600&＃39;);$(&＃39;#reg .info_pass .s3&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s4&＃39;).c_css(&＃39;color&＃39;, &＃39;#FF6600&＃39;).wen_ben(&＃39;中&＃39;);}else if(chuang >&＃61; 1 && fuza >&＃61; 1){$(&＃39;#reg .info_pass .s1&＃39;).c_css(&＃39;color&＃39;, &＃39;#800000&＃39;);$(&＃39;#reg .info_pass .s2&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s3&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s4&＃39;).c_css(&＃39;color&＃39;, &＃39;#800000&＃39;).wen_ben(&＃39;低&＃39;);}else {$(&＃39;#reg .info_pass .s1&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s2&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s3&＃39;).c_css(&＃39;color&＃39;, &＃39;#ccc&＃39;);$(&＃39;#reg .info_pass .s4&＃39;).wen_ben(&＃39;&＃39;);}if (chuang >&＃61; 6 && chuang <&＃61; 20 && !/\s/.test(neirong) && fuza >&＃61; 2) flag &＃61; true;return flag;}