龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > php编程 >

PHP+jQuery 注册模块开发详解(5)

时间:2014-10-15 11:00来源:网络整理 作者:网络 点击:
分享到:
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();
          }
});
精彩图集

赞助商链接