PHP+jQuery 注册模块开发详解(5)
register.html密码栏目HTML代码片段: div class="ipt" input type="password" name="upwd" id="upwd" value="" placeholder="设置密码" / div class="upwdpic" span id="upwdchk"/span img id="pictie
register.html密码栏目HTML代码片段:
<div class="ipt">
<input type="password" name="upwd" id="upwd" value="" placeholder="设置密码" />
<div class="upwdpic">
<span id="upwdchk"></span>
<img id="pictie" />
</div>
</div>
register.js密码代码片段:
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();
}
});
精彩图集
精彩文章






