使用 jQuery, Angular.js 實現登陸界面驗證碼詳解

寫在前面：

前段事件，作了一個用ajax後臺異步交互的登陸功能，本身在上面加了一個驗證碼的功能，這個功能背後的原理挺好理解的，實現起來也十分簡單，特此寫波分享，，本身寫的過程當中踩了很多坑，這裏仍是照例寫的詳細點，你們能夠作個參考，喜歡的朋友能夠點個贊，或者關注一波。

最終實現的效果：

驗證碼效果

當點擊登陸以前，會先判斷驗證碼是否正確（驗證碼能夠不區分大小寫，也能夠區分大小寫），驗證碼錯誤會刷新驗證碼，驗證碼驗證以前，不會進行跨域登陸操做。

總體思路。

1.取四位隨機數

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

3.在點擊登陸以前先用if判斷驗證碼input框的值和輸入框的值是否相等，相等時進入下一步操做，不相等直接返回錯誤

4.裏面ajax的部分能夠直接套進去。

細節：

1.這裏的驗證碼框的背景圖片是網上本身找的，顯得驗證碼比較正式，否則顯得有點low。

2.不區分大小寫實際上就是利用js的toUpperCase()方法是把小寫轉換成大寫，由於是原生js因此在angular中也可使用！

3.將驗證碼封裝成一個函數，而後在點擊登陸時在最後調用這個函數，能夠每次都刷新函數。

4.避免驗證碼被複制，在html裏面使用：disabled="disabled"——禁止驗證碼框文字被選中。

下面是代碼部分實現過程詳解（註釋寫的比較詳細）：

html代碼應該不會解釋了，有不懂的，能夠在評論區問我。下面有部分關於angular的內容，暫時還沒學到這裏能夠跳過去，沒有影響到實現效果的。(能夠把代碼複製過去，而後在本身本地試試。)

先放用jq實現的過程，而後放angular實現的過程，看過我幾篇文章的都知道，我儘可能會把全部代碼，每一步都註釋的清清楚楚，但願能夠幫助到你們。

這裏是html的內容：

<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="不區分大小寫" 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代碼實現部分：

記得引入jq文件。

var authCode;
    randomCode=$("#js5-authCode").eq(0);//獲取驗證碼出現的方框dom
console.log(randomCode);

function createCode() {
    authCode="";//設置這個爲空變量，而後往裏面添加隨機數
    var authCodeLength=4;//隨機數的長度
    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);//隨機取一位數
        authCode +=randomArray[index];//取四位數，並+相連
    }
    console.log(authCode);//取到四位隨機數以後，跳出循環
    randomCode.val(authCode);//將四位隨機數賦值給驗證碼出現的方框
    console.log(randomCode.val());
}

//以上是封裝的獲取驗證碼的函數

$(function () {//當文檔加載結束後，運行這個函數
    createCode();//一開始先運行一遍取隨機數的函數
    $("#js5-btn").click(function () {//這裏是一個點擊事件
        console.log(window.randomCode);
        //這裏寫了一個必報，window.randomCode是在文檔裏面找到這個dom，不然上文的四個隨機數傳不到這裏來
        var randomCode=window.randomCode.val();
        console.log(randomCode);
        var authInput=$("#js5-form3-input").val().toUpperCase(),
            user=$("#js5-userNum").val(),
            psd=$('#js5-password').val();
        //上面三個是分別獲取驗證碼輸入框的值，帳號的值，密碼的值。
        //驗證碼輸入框這裏，最後toUpperCase()方法是把小寫轉換成大寫
        console.log(authInput);
        console.log(randomCode);
        console.log(user,psd);
        if (randomCode===authInput) {
        //驗證驗證碼，在驗證碼輸入框與驗證碼的值不相等以前，是不會進入下面登陸的步驟的，驗證碼是第一步關卡
            var firstAjax = new XMLHttpRequest();
            //建立ajax對象，這裏是ajax跨域的部分
            firstAjax.open("POST", "這裏是你url跨域的地址", true);
            //鏈接服務器，跨域。
            firstAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應該包含在經過後續 send() 調用而發佈的請求中。
            //能夠理解爲，這是http的請求頭，固定格式，位置必需要在open以後，send以前。
            firstAjax.send("name=" + user + "&pwd=" + psd);
            //在使用POST方式時參數表明着向服務器發送的數據，前面兩個是帳號框和密碼框
            firstAjax.onreadystatechange = function () {//當參數被傳入服務器的時候，引用監聽事件。
                if (firstAjax.readyState == 4) {//readyState四種狀態，當執行四步完成以後
                    if (firstAjax.status == 200) {//返回的是200，表明成功，404未找到。
                        var returnValue = JSON.parse(firstAjax.responseText);//取回由服務器返回的數據
                        console.log(returnValue);
                        if (returnValue.code == 0) {//這裏是後端定義的，當code==0的時候，表明登陸正確。
                            window.location.href = "https://www.baidu.com/index.php?tn=98012088_3_dg&ch=1";
                            //後端返回的數據驗證成功就跳轉連接。
                        }
                        else {
                            $("#js5Message").text(returnValue.message);//當code不等於0時，返回出錯信息
                        }
                    } else {
                        alert("出錯咯，咯咯咯");//返回的不是200的時候，出錯。
                    }
                }
            };
            createCode();//點擊登陸按鈕，驗證以後會刷新驗證碼
        }
        else {
            $("#js5Message").text("驗證碼錯誤，請從新輸入");
            createCode();//驗證碼錯誤，刷新驗證碼。
        }
    })
});複製代碼

這是是angular代碼實現部分：

jq部分寫的詳細一點，這裏也挺詳細的，若是不懂的話，能夠回頭看看jq部分，原理都是同樣的，複製到本地本身多試試，記得引angular文件。

var enter=angular.module("myApp");
enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) {
    $scope.changeVerify=function () {//定義了一個點擊事件，獲取驗證碼
        var authCode="";
        var authCodeLength=4;//取幾個隨機數字
        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);//隨機取一位數
            authCode +=randomArray[index];//取四位數，並+相連
        }
        $scope.showAuthCode=authCode;//賦值
        console.log($scope.showAuthCode);
    };

    //上面是封裝的獲取驗證碼的函數，會在下面進行調用
  (function () {
        $scope.changeVerify();//調用點擊事件。
        $scope.enter=function (userName,userPsd) {
            //點擊登陸按鈕事件，將雙向綁定的帳號密碼當作參數傳入函數
            if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()將小寫轉化爲大寫
                //雙向綁定驗證碼輸入框，能夠直接使用，這裏是驗證驗證碼
                $http({
                    method:"POST",
                    url:"你的跨域地址",//$http的固定格式
                    params:{
                        "name":userName,
                        "pwd":userPsd
                        //雙向綁定的參數傳到下個頁面
                    }
                }).then(function (res) {
                    //獲取服務器返回的參數
                    console.log(res);
                    if (res.data.code!==0){
                        //參數不爲0的時候，彈出提示
                        alert(res.data.message);
                    }else {
                        //參數爲0的時候，跳轉頁面
                        $state.go("home.studentList");

                    }
                })
            }else {
                alert("驗證碼輸入錯誤咯，咯咯咯");
                $scope.changeVerify();//驗證後，刷新驗證碼
            }
        }
    }());複製代碼

後話

斷斷續續寫了兩天，如今寫的沒有以前那麼快了。。差很少就以上這些內容，有問題可在評論區留言。有不足歡迎指導，拍磚。

最後：由於我常常看不懂別人寫的分享，因此我的寫文比較偏小白，寫的很差之處，歡迎指點。而後就是但願看完的朋友點個喜歡，也能夠關注一下我，如今這階段基本上每月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支持！
ps：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。