快捷導(dǎo)航

使用jQuery如何寫一個(gè)含驗(yàn)證碼的登錄界面

更新時(shí)間：2019年05月13日 14:31:19 作者：前端dog

這篇文章主要介紹了如何寫一個(gè)含驗(yàn)證碼的登錄界面，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一個(gè)包含用戶名，密碼，驗(yàn)證碼的簡單的登陸界面，如下圖所示：

首先是 HTML 代碼：

<div id="divID">
 <div style="background-color:transparent;">
  <form id="ff" method="post">
   <ul class="reg-box">
    <li>
     <label for="">賬 號(hào)</label>
     <input type="text" name="accName" value="" class="account" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/>
     <span class="error error5"></span>
    </li>
    <li>
     <label for="">密 碼</label>
     <input type="password" name="accPassWord" class="admin_pwd" value="" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/>
     <span class="error error6"></span>
    </li>
    <li>
     <label for="">驗(yàn)證碼</label>
     <input type="text" class="sradd photokey" id="key" value="" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" onBlur="textBlur(this)" onFocus=" textFocus(this) " />
     <span class="add phoKey"></span>
     <span class="error error7"></span>
    </li>
   </ul>
   <div class="sub">
    <input type="submit" value="立即登錄"/>
   </div>
  </form>
 </div>
</div>

然后是實(shí)現(xiàn)驗(yàn)證用戶的輸入是否正確的 JS 代碼：

//文本框默認(rèn)提示文字
function textFocus(el) {
 if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
}
function textBlur(el) {
 if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
}

$(function(){
 /*生成驗(yàn)證碼*/
 create_code();

 //登錄頁面的提示文字
 //賬戶輸入框失去焦點(diǎn)
 (function login_validate(){
  $(".reg-box .account").blur(function(){
   //reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;//驗(yàn)證手機(jī)正則(輸入前7位至11位)

   if( $(this).val()==""|| $(this).val()=="請(qǐng)輸入您的賬號(hào)")
   {
    $(this).addClass("errorC");
    $(this).next().html("賬號(hào)不能為空！");
    $(this).next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
//    else if($(".reg-box .account").val().length<11)
//    {
//     $(this).addClass("errorC");
//     $(this).next().html("賬號(hào)長度有誤！");
//     $(this).next().css("display","block");
//    }
//    else if(!reg.test($(".reg-box .account").val()))
//    {
//     $(this).addClass("errorC");
//     $(this).next().html("賬號(hào)不存在!");
//     $(this).next().css("display","block");
//    }
   else
   {
    $(".sub input").prop('disabled', false);
    $(this).addClass("checkedN");
    $(this).removeClass("errorC");
    $(this).next().empty();
   }
  });
  /*密碼輸入框失去焦點(diǎn)*/
  $(".reg-box .admin_pwd").blur(function(){
   //reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;

   if($(this).val() == ""){
    $(this).addClass("errorC");
    $(this).next().html("密碼不能為空！");
    $(this).next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
//    else if(!reg.test($(".admin_pwd").val())) {
//     $(this).addClass("errorC");
//     $(this).next().html("密碼為6~12位的數(shù)字、字母或特殊字符！");
//     $(this).next().css("display","block");
//    }
   else {
    $(".sub input").prop('disabled', false);
    $(this).addClass("checkedN");
    $(this).removeClass("errorC");
    $(this).next().empty();
   }
  });

  /*驗(yàn)證碼輸入框失去焦點(diǎn)*/
  $(".reg-box .photokey").blur(function(){
   var code1=$('.reg-box input.photokey').val().toLowerCase();
   var code2=$(".reg-box .phoKey").text().toLowerCase();
   if(code1!=code2)
   {
    $(this).addClass("errorC");
    $(this).next().next().html("驗(yàn)證碼輸入錯(cuò)誤!!!");
    $(this).next().next().css("display","block");
    $(".sub input").prop('disabled', true);
   }
   else
   {
    $(".sub input").prop('disabled', false);
    $(this).removeClass("errorC");
    $(this).next().next().empty();
    $(this).addClass("checkedN");
   }
  })
 })();
});

函數(shù) create_code() 用于生成驗(yàn)證碼：

function create_code() {
 function shuffle() {
  var arr = ['1', 'r', 'Q', '4', 'S', '6', 'w', 'u', 'D', 'I', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p',
   'q', '2', 's', 't', '8', 'v', '7', 'x', 'y', 'z', 'A', 'B', 'C', '9', 'E', 'F', 'G', 'H', '0', 'J', 'K', 'L', 'M', 'N', 'O', 'P', '3', 'R',
   '5', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  return arr.sort(function () {
   return (Math.random() - .5);
  });
 };
 shuffle();
 function show_code() {
  var ar1 = '';
  var code = shuffle();
  for (var i = 0; i < 6; i++) {
   ar1 += code[i];
  }
  ;
  //var ar=ar1.join('');
  $(".reg-box .phoKey").text(ar1);
 };
 show_code();
 $(".reg-box .phoKey").click(function () {
  show_code();
 });
}

最后是非常重要的 CSS 代碼：

body{
 background: #000;
}
#divID {
  position: fixed;
  left: 47%;
  top: 53%;
  width: 500px;
  margin-left: -200px;
  margin-top: -150px;
  font-family: "黑體";
  /*禁止復(fù)制粘貼*/
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select:none;
  color:#fff;
 }
 .register_dialog_info {
  float: left;
  margin-left:10px;
  color: #fff;
  margin-top: 5px;
  font-size: 20px;
 }
 form{padding: 20px 0px;}
 ul li {list-style: none;}
 .sub {
  text-align: center;
 }
 .sub input {
  display: inline-block;
  width: 300px;
  background-color: #012246;
  color: rgb(255, 255, 255);
  font-size: 20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  font-family: 黑體;
  outline: none;
  border: none;
  margin: auto;
  border-radius: 10px;
 }
 input[type = "submit"]:hover{cursor: pointer;}

 .reg-box { padding-left: 30px; }

 .reg-box li { line-height: 44px; width: 500px; overflow: hidden; }

 .reg-box li label { width: 68px; height: 50px; float: left; line-height: 50px; text-align: right; padding-right: 20px; }

 .reg-box li input,.reg-box li select{ border-radius: 3px; padding: 6px 0; font-size: 16px; width: 296px; height: 49px; line-height: 28px; border: 1px solid #dddddd; text-indent: 0.5em; float: left; }

 .reg-box li select option{font-size:16px;}

 /*驗(yàn)證碼*/
 .add { width: 128px; height: 44px; float: left; _display: inline; cursor: pointer; margin-left: 20px; }

 .reg-box li .sradd { width: 148px; text-indent: 4px; font-size: 14px; }

 .reg-box li .input-code { width: 106px; padding: 10px; font-family: Arial; font-style: italic; color: red; letter-spacing: 1px; cursor: pointer; text-align: center; text-indent: 0; }

 .yzm,.phoKey { background: #012246; text-align: center; line-height: 44px; color: #fff; border-radius: 3px;}

 .phoKey{letter-spacing: 3px; font-size:18px;}

 .yzmc { background: #dddddd; text-align: center; line-height: 44px; color: #999; }

 .error { clear:both;display:block;color: red; padding-left: 90px; padding-bottom:5px;height:20px;float: left; font-size:12px;line-height: 20px;}

 input { background-color: #fff; outline: none; }

 .reg-box li { width: auto; }

 .reg-box li input.errorC, .errorC{ border: 1px solid blue; }

 .reg-box li input.checkedN , .checkedN{ border: 1px solid #1ece6d; }

以上所述是小編給大家介紹的如何寫一個(gè)含驗(yàn)證碼的登錄界面詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: