function noticeEasy(){ //密码全部为相同字符或者为123456,用于keyup时的notice var noticeMsg = '密码太简单，请尝试数字、字母和下划线的组合'; return notice($("#upwdchk"),noticeMsg); } function errorEasy(){ //密码全部为相同字符或者为123456,用于blur时的error var errorMsg = '密码太简单，请尝试数字、字母和下划线的组合'; return error($("#upwdchk"),errorMsg); } //检测密码长度函数 //检测密码长度 function upwdLen(value,func){ var showMsg = $("#upwdchk"); if(countLen(value) > 16){ var errorMsg = '密码不能超过16个字符'; error(showMsg,errorMsg); $("#pictie").hide(); }else if(countLen(value) < 6){ //使用notice更加友好 var noticeMsg = '密码不能少于6个字符'; notice(showMsg,noticeMsg); $("#pictie").hide(); }else if(countLen(value) == 0){ //使用notice更加友好 var noticeMsg = '密码不能为空'; notice(showMsg,noticeMsg); $("#pictie").hide(); }else{ upwdStrong(value,func);//如果长度不成问题,则调用检测密码强弱 } return countLen(value);//返回字符长度 } //检测密码强弱 function upwdStrong(value,func){ var showMsg = $("#upwdchk"); if(value.match(/^(.)\1*$/)!=null || value.match(/^123456$/)){ //密码全部为相同字符或者为123456，调用函数noticeEasy或errorEasy func; }else if(value.match(/^[A-Za-z]+$/)!=null || value.match(/^\d+$/)!=null || value.match(/^[^A-Za-z0-9]+$/)!=null){ //全部为相同类型的字符为弱 var successMsg = '弱：试试字母、数字、符号混搭'; success(showMsg,successMsg); //插入强弱条 $("#pictie").show().attr("src","images/weak.jpg"); pwdval = true; }else if(value.match(/^[^A-Za-z]+$/)!=null || value.match(/^[^0-9]+$/)!=null || value.match(/^[a-zA-Z0-9]+$/)!=null){ //任意两种不同类型字符组合为中强( 数字+符号,字母+符号,数字+字母 ) var successMsg = '中强：试试字母、数字、符号混搭'; success(showMsg,successMsg); $("#pictie").show().attr("src","images/normal.jpg"); pwdval = true; }else{ //数字、字母和符号混合 var successMsg = '强：请牢记您的密码'; success(showMsg,successMsg); $("#pictie").show().attr("src","images/strong.jpg"); pwdval = true; } } $upper = $("<div id=\"upper\">大写锁定已打开</div>"); $("#upwd").focus(function(){ var noticeMsg = '6到16个字符，区分大小写'; notice($("#upwdchk"),noticeMsg); $("#pictie").hide(); }) .click(function(){ var noticeMsg = '6到16个字符，区分大小写'; notice($("#upwdchk"),noticeMsg); $("#pictie").hide(); }).keydown(function(){ //把焦点移至邮箱栏目 if(event.keyCode == 13){ $("#rupwd").focus(); } }) .keyup(function(){ //判断大写是否开启 //输入密码的长度 var len = this.value.length; if(len!=0){ //当输入的最新以为含有大写字母时说明开启了大写锁定 if(this.value[len-1].match(/[A-Z]/)!=null){ //给出提示 $upper.insertAfter($(".upwdpic")); }else{ //移除提示 $upper.remove(); } }else{ //当密码框为空时移除提示 if($upper){ $upper.remove(); } }//判断大写开启结束 //判断长度及强弱 upwdLen(this.value,noticeEasy()); }) //keyup事件结束 .blur(function(){ upwdLen(this.value,errorEasy()); //upwdLen函数中部分提示使用notice是为了keyup事件中不出现红色提示,而blur事件中则需使用error标红 if(this.value == ""){ var errorMsg = '密码不能为空'; error($("#upwdchk"),errorMsg); $("#pictie").hide(); }else if(countLen(this.value)<6){ var errorMsg = '密码不能少于6个字符'; error($("#upwdchk"),errorMsg); $("#pictie").hide(); } });
大写锁定的思路是：判断输入的字符的最新一位是否是大写字母，如果是大写字母，则提示大写锁定键打开。这种方法并不十分准确，网上有一些插件能判断大写锁定，在这里只是简单地做了一下判断。
提示文字( Chrome下 )
①获得焦点、点击时
②输入时
失去焦点时与此效果相同
失去焦点时与此效果相同
失去焦点时与此效果相同
③失去焦点为空时
④出现大写时
密码栏目至此结束。
重复密码：失去焦点时判断是否和密码一致
reister.html代码片段:
<div> <input type="password" value="" placeholder="确认密码" /> <span></span> </div>
register.js代码片段：