欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解

 更新時間:2017年04月27日 09:21:06   投稿:mrr  
這篇文章主要介紹了使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解,需要的朋友可以參考下

寫在前面:

前段事件,做了一個用ajax后臺異步交互的登錄功能,自己在上面加了一個驗證碼的功能,這個功能背后的原理挺好理解的,實現(xiàn)起來也十分簡單,特此寫波分享,,自己寫的過程中踩了不少坑,這里還是照例寫的詳細(xì)點,大家可以做個參考,喜歡的朋友可以點個贊,或者關(guān)注一波。

最終實現(xiàn)的效果:

 

當(dāng)點擊登錄之前,會先判斷驗證碼是否正確(驗證碼可以不區(qū)分大小寫,也可以區(qū)分大小寫),驗證碼錯誤會刷新驗證碼,驗證碼驗證之前,不會進(jìn)行跨域登錄操作。

整體思路。

1.取四位隨機(jī)數(shù)

2.賦值到驗證碼的input框里。

3.在點擊登錄之前先用if判斷驗證碼input框的值和輸入框的值是否相等,相等時進(jìn)入下一步操作,不相等直接返回錯誤

4.里面ajax的部分可以直接套進(jìn)去。

細(xì)節(jié):

1.這里的驗證碼框的背景圖片是網(wǎng)上自己找的,顯得驗證碼比較正式,不然顯得有點low。

2.不區(qū)分大小寫實際上就是利用js的toUpperCase()方法是把小寫轉(zhuǎn)換成大寫,因為是原生js所以在angular中也可以使用!

3.將驗證碼封裝成一個函數(shù),然后在點擊登錄時在最后調(diào)用這個函數(shù),可以每次都刷新函數(shù)。

4.避免驗證碼被復(fù)制,在html里面使用:disabled="disabled"——禁止驗證碼框文字被選中。

下面是代碼部分實現(xiàn)過程詳解(注釋寫的比較詳細(xì)):

html代碼應(yīng)該不會解釋了,有不懂的,可以在評論區(qū)問我。下面有部分關(guān)于angular的內(nèi)容,暫時還沒學(xué)到這里可以跳過去,沒有影響到實現(xiàn)效果的。(可以把代碼復(fù)制過去,然后在自己本地試試。)

先放用jq實現(xiàn)的過程,然后放angular實現(xiàn)的過程,看過我?guī)灼恼碌亩贾溃冶M量會把所有代碼,每一步都注釋的清清楚楚,希望可以幫助到大家。

這里是html的內(nèi)容:

<div class="js5-form" id="js5-form" ng-controller="enterCtrl">
    <div id="enter-all" >
      <h3>jnshu后臺登錄</h3>
      <form action="" name="myForm">
        <div class="js5-input-div">
          <div class="js5-input-img1"></div>
          <input id="js5-userNum" type="text" name="userName" placeholder="用戶名" maxlength="12" ng-model="userName" ng-keyup="mykey($event)" required/>
        </div>
      </form>
      <form action="" name="registerForm">
        <div class="js5-input-div">
          <div class="js5-input-img2"></div>
          <input id="js5-password" type="password" name="userPsd" placeholder="密碼" maxlength="20" ng-model="userPsd" ng-keyup="mykey($event)" ng-minlength="5" ng-maxlength="16" required/>
        </div>
      </form>
      <!--賬號和密碼的登錄框-->
      <form action="" >
        <div class="js5-input-div">
          <span class="js5-input-divSpan">驗證碼:</span>
          <input type="text" placeholder="不區(qū)分大小寫" class="js5-form3-input" id="js5-form3-input" ng-model="writeCode" maxlength="6" ng-keyup="mykey($event)">
          <input type="text" class="js5-authCode" value="" id="js5-authCode" ng-model="showAuthCode" disabled="disabled">
           <!--disabled="disabled"禁止驗證碼框文字被選中-->
          <span class="spanShift" ng-click="changeVerify()">獲取</span>
        </div>
      </form>

這里是jq代碼實現(xiàn)部分:

var authCode;
  randomCode=$("#js5-authCode").eq(0);//獲取驗證碼出現(xiàn)的方框dom
console.log(randomCode);
function createCode() {
  authCode="";//設(shè)置這個為空變量,然后往里面添加隨機(jī)數(shù)
  var authCodeLength=4;//隨機(jī)數(shù)的長度
  randomArray=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
  //創(chuàng)建一個數(shù)組,隨機(jī)數(shù)從里面選擇四位數(shù)或者更多
  for(var i=0;i<authCodeLength;i++){
    var index=Math.floor(Math.random()*36);//隨機(jī)取一位數(shù)
    authCode +=randomArray[index];//取四位數(shù),并+相連
  }
  console.log(authCode);//取到四位隨機(jī)數(shù)之后,跳出循環(huán)
  randomCode.val(authCode);//將四位隨機(jī)數(shù)賦值給驗證碼出現(xiàn)的方框
  console.log(randomCode.val());
}
//以上是封裝的獲取驗證碼的函數(shù)
$(function () {//當(dāng)文檔加載結(jié)束后,運(yùn)行這個函數(shù)
  createCode();//一開始先運(yùn)行一遍取隨機(jī)數(shù)的函數(shù)
  $("#js5-btn").click(function () {//這里是一個點擊事件
    console.log(window.randomCode);
    //這里寫了一個必報,window.randomCode是在文檔里面找到這個dom,否則上文的四個隨機(jī)數(shù)傳不到這里來
    var randomCode=window.randomCode.val();
    console.log(randomCode);
    var authInput=$("#js5-form3-input").val().toUpperCase(),
      user=$("#js5-userNum").val(),
      psd=$('#js5-password').val();
    //上面三個是分別獲取驗證碼輸入框的值,賬號的值,密碼的值。
    //驗證碼輸入框這里,最后toUpperCase()方法是把小寫轉(zhuǎn)換成大寫
    console.log(authInput);
    console.log(randomCode);
    console.log(user,psd);
    if (randomCode===authInput) {
    //驗證驗證碼,在驗證碼輸入框與驗證碼的值不相等之前,是不會進(jìn)入下面登錄的步驟的,驗證碼是第一步關(guān)卡
      var firstAjax = new XMLHttpRequest();
      //創(chuàng)建ajax對象,這里是ajax跨域的部分
      firstAjax.open("POST", "這里是你url跨域的地址", true);
      //連接服務(wù)器,跨域。
      firstAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //setRequestHeader() 方法指定了一個 HTTP 請求的頭部,它應(yīng)該包含在通過后續(xù) send() 調(diào)用而發(fā)布的請求中。
      //可以理解為,這是http的請求頭,固定格式,位置必須要在open之后,send之前。
      firstAjax.send("name=" + user + "&pwd=" + psd);
      //在使用POST方式時參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù),前面兩個是賬號框和密碼框
      firstAjax.onreadystatechange = function () {//當(dāng)參數(shù)被傳入服務(wù)器的時候,引用監(jiān)聽事件。
        if (firstAjax.readyState == 4) {//readyState四種狀態(tài),當(dāng)執(zhí)行四步完成之后
          if (firstAjax.status == 200) {//返回的是200,代表成功,404未找到。
            var returnValue = JSON.parse(firstAjax.responseText);//取回由服務(wù)器返回的數(shù)據(jù)
            console.log(returnValue);
            if (returnValue.code == 0) {//這里是后端定義的,當(dāng)code==0的時候,代表登錄正確。
              window.location.;
              //后端返回的數(shù)據(jù)驗證成功就跳轉(zhuǎn)鏈接。
            }
            else {
              $("#js5Message").text(returnValue.message);//當(dāng)code不等于0時,返回出錯信息
            }
          } else {
            alert("出錯咯,咯咯咯");//返回的不是200的時候,出錯。
          }
        }
      };
      createCode();//點擊登錄按鈕,驗證之后會刷新驗證碼
    }
    else {
      $("#js5Message").text("驗證碼錯誤,請重新輸入");
      createCode();//驗證碼錯誤,刷新驗證碼。
    }
  })
});

這是是angular代碼實現(xiàn)部分:

jq部分寫的詳細(xì)一點,這里也挺詳細(xì)的,如果不懂的話,可以回頭看看jq部分,原理都是一樣的,復(fù)制到本地自己多試試。

var enter=angular.module("myApp");
enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) {
  $scope.changeVerify=function () {//定義了一個點擊事件,獲取驗證碼
    var authCode="";
    var authCodeLength=4;//取幾個隨機(jī)數(shù)字
    var randomArray=[0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
    for(var i=0;i<authCodeLength;i++){
      var index=Math.floor(Math.random()*36);//隨機(jī)取一位數(shù)
      authCode +=randomArray[index];//取四位數(shù),并+相連
    }
    $scope.showAuthCode=authCode;//賦值
    console.log($scope.showAuthCode);
  };
  //上面是封裝的獲取驗證碼的函數(shù),會在下面進(jìn)行調(diào)用
 (function () {
    $scope.changeVerify();//調(diào)用點擊事件。
    $scope.enter=function (userName,userPsd) {
      //點擊登錄按鈕事件,將雙向綁定的賬號密碼當(dāng)做參數(shù)傳入函數(shù)
      if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()將小寫轉(zhuǎn)化為大寫
        //雙向綁定驗證碼輸入框,可以直接使用,這里是驗證驗證碼
        $http({
          method:"POST",
          url:"你的跨域地址",//$http的固定格式
          params:{
            "name":userName,
            "pwd":userPsd
            //雙向綁定的參數(shù)傳到下個頁面
          }
        }).then(function (res) {
          //獲取服務(wù)器返回的參數(shù)
          console.log(res);
          if (res.data.code!==0){
            //參數(shù)不為0的時候,彈出提示
            alert(res.data.message);
          }else {
            //參數(shù)為0的時候,跳轉(zhuǎn)頁面
            $state.go("home.studentList");
          }
        })
      }else {
        alert("驗證碼輸入錯誤咯,咯咯咯");
        $scope.changeVerify();//驗證后,刷新驗證碼
      }
    }
  }());

后話

斷斷續(xù)續(xù)寫了兩天,現(xiàn)在寫的沒有之前那么快了。。差不多就以上這些內(nèi)容,有問題可在評論區(qū)留言。有不足歡迎指導(dǎo),拍磚。

以上所述是小編給大家介紹的使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論