怎么使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼

小編給大家分享一下怎么使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最終實(shí)現(xiàn)的效果：

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

整體思路。

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

2.賦值到驗(yàn)證碼的input框里。

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

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

細(xì)節(jié)：

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

2.不區(qū)分大小寫實(shí)際上就是利用js的toUpperCase()方法是把小寫轉(zhuǎn)換成大寫，因?yàn)槭窃鷍s所以在angular中也可以使用！

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

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

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

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

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

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

<div class="js5-form" id="js5-form" ng-controller="enterCtrl">
    <div id="enter-all" >
      <h4>jnshu后臺登錄</h4>
      <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">驗(yàn)證碼：</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"禁止驗(yàn)證碼框文字被選中-->
          <span class="spanShift" ng-click="changeVerify()">獲取</span>
        </div>
      </form>

這里是jq代碼實(shí)現(xiàn)部分：

var authCode;
  randomCode=$("#js5-authCode").eq(0);//獲取驗(yàn)證碼出現(xiàn)的方框dom
console.log(randomCode);
function createCode() {
  authCode="";//設(shè)置這個(gè)為空變量，然后往里面添加隨機(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)建一個(gè)數(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ù)賦值給驗(yàn)證碼出現(xiàn)的方框
  console.log(randomCode.val());
}
//以上是封裝的獲取驗(yàn)證碼的函數(shù)
$(function () {//當(dāng)文檔加載結(jié)束后，運(yùn)行這個(gè)函數(shù)
  createCode();//一開始先運(yùn)行一遍取隨機(jī)數(shù)的函數(shù)
  $("#js5-btn").click(function () {//這里是一個(gè)點(diǎn)擊事件
    console.log(window.randomCode);
    //這里寫了一個(gè)必報(bào)，window.randomCode是在文檔里面找到這個(gè)dom，否則上文的四個(gè)隨機(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();
    //上面三個(gè)是分別獲取驗(yàn)證碼輸入框的值，賬號的值，密碼的值。
    //驗(yàn)證碼輸入框這里，最后toUpperCase()方法是把小寫轉(zhuǎn)換成大寫
    console.log(authInput);
    console.log(randomCode);
    console.log(user,psd);
    if (randomCode===authInput) {
    //驗(yàn)證驗(yàn)證碼，在驗(yàn)證碼輸入框與驗(yàn)證碼的值不相等之前，是不會進(jìn)入下面登錄的步驟的，驗(yà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() 方法指定了一個(gè) HTTP 請求的頭部，它應(yīng)該包含在通過后續(xù) send() 調(diào)用而發(fā)布的請求中。
      //可以理解為，這是http的請求頭，固定格式，位置必須要在open之后，send之前。
      firstAjax.send("name=" + user + "&pwd=" + psd);
      //在使用POST方式時(shí)參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù)，前面兩個(gè)是賬號框和密碼框
      firstAjax.onreadystatechange = function () {//當(dāng)參數(shù)被傳入服務(wù)器的時(shí)候，引用監(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的時(shí)候，代表登錄正確。
              window.location.href = "https://www.baidu.com/index.php?tn=98012088_3_dg&ch=1";
              //后端返回的數(shù)據(jù)驗(yàn)證成功就跳轉(zhuǎn)鏈接。
            }
            else {
              $("#js5Message").text(returnValue.message);//當(dāng)code不等于0時(shí)，返回出錯信息
            }
          } else {
            alert("出錯咯，咯咯咯");//返回的不是200的時(shí)候，出錯。
          }
        }
      };
      createCode();//點(diǎn)擊登錄按鈕，驗(yàn)證之后會刷新驗(yàn)證碼
    }
    else {
      $("#js5Message").text("驗(yàn)證碼錯誤，請重新輸入");
      createCode();//驗(yàn)證碼錯誤，刷新驗(yàn)證碼。
    }
  })
});

這是是angular代碼實(shí)現(xiàn)部分：

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

var enter=angular.module("myApp");
enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) {
  $scope.changeVerify=function () {//定義了一個(gè)點(diǎn)擊事件，獲取驗(yàn)證碼
    var authCode="";
    var authCodeLength=4;//取幾個(gè)隨機(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);
  };
  //上面是封裝的獲取驗(yàn)證碼的函數(shù)，會在下面進(jìn)行調(diào)用
 (function () {
    $scope.changeVerify();//調(diào)用點(diǎn)擊事件。
    $scope.enter=function (userName,userPsd) {
      //點(diǎn)擊登錄按鈕事件，將雙向綁定的賬號密碼當(dāng)做參數(shù)傳入函數(shù)
      if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()將小寫轉(zhuǎn)化為大寫
        //雙向綁定驗(yàn)證碼輸入框，可以直接使用，這里是驗(yàn)證驗(yàn)證碼
        $http({
          method:"POST",
          url:"你的跨域地址",//$http的固定格式
          params:{
            "name":userName,
            "pwd":userPsd
            //雙向綁定的參數(shù)傳到下個(gè)頁面
          }
        }).then(function (res) {
          //獲取服務(wù)器返回的參數(shù)
          console.log(res);
          if (res.data.code!==0){
            //參數(shù)不為0的時(shí)候，彈出提示
            alert(res.data.message);
          }else {
            //參數(shù)為0的時(shí)候，跳轉(zhuǎn)頁面
            $state.go("home.studentList");
          }
        })
      }else {
        alert("驗(yàn)證碼輸入錯誤咯，咯咯咯");
        $scope.changeVerify();//驗(yàn)證后，刷新驗(yàn)證碼
      }
    }
  }());

以上是“怎么使用jQuery,Angular實(shí)現(xiàn)登錄界面驗(yàn)證碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！