寫在前面：
前段事件，做了一個用ajax后臺異步交互的登錄功能，自己在上面加了一個驗證碼的功能，這個功能背后的原理挺好理解的，實現(xiàn)起來也十分簡單，特此寫波分享，，自己寫的過程中踩了不少坑，這里還是照例寫的詳細點，大家可以做個參考，喜歡的朋友可以點個贊，或者關注一波。
最終實現(xiàn)的效果：
當點擊登錄之前，會先判斷驗證碼是否正確（驗證碼可以不區(qū)分大小寫，也可以區(qū)分大小寫），驗證碼錯誤會刷新驗證碼，驗證碼驗證之前，不會進行跨域登錄操作。
整體思路。
1.取四位隨機數(shù)
2.賦值到驗證碼的input框里。
3.在點擊登錄之前先用if判斷驗證碼input框的值和輸入框的值是否相等，相等時進入下一步操作，不相等直接返回錯誤
4.里面ajax的部分可以直接套進去。
細節(jié)：
1.這里的驗證碼框的背景圖片是網(wǎng)上自己找的，顯得驗證碼比較正式，不然顯得有點low。
2.不區(qū)分大小寫實際上就是利用js的toUpperCase()方法是把小寫轉換成大寫，因為是原生js所以在angular中也可以使用！
3.將驗證碼封裝成一個函數(shù)，然后在點擊登錄時在最后調用這個函數(shù)，可以每次都刷新函數(shù)。
4.避免驗證碼被復制，在html里面使用：disabled="disabled"――禁止驗證碼框文字被選中。
下面是代碼部分實現(xiàn)過程詳解（注釋寫的比較詳細）：
html代碼應該不會解釋了，有不懂的，可以在評論區(qū)問我。下面有部分關于angular的內容，暫時還沒學到這里可以跳過去，沒有影響到實現(xiàn)效果的。(可以把代碼復制過去，然后在自己本地試試。)
先放用jq實現(xiàn)的過程，然后放angular實現(xiàn)的過程，看過我?guī)灼恼碌亩贾溃冶M量會把所有代碼，每一步都注釋的清清楚楚，希望可以幫助到大家。
這里是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="不區(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)的方框domconsole.log(randomCode);function createCode() { authCode="";//設置這個為空變量，然后往里面添加隨機數(shù) var authCodeLength=4;//隨機數(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ù)組，隨機數(shù)從里面選擇四位數(shù)或者更多 for(var i=0;i<authCodeLength;i++){ var index=Math.floor(Math.random()*36);//隨機取一位數(shù) authCode +=randomArray[index];//取四位數(shù)，并+相連 } console.log(authCode);//取到四位隨機數(shù)之后，跳出循環(huán) randomCode.val(authCode);//將四位隨機數(shù)賦值給驗證碼出現(xiàn)的方框 console.log(randomCode.val());}//以上是封裝的獲取驗證碼的函數(shù)$(function () {//當文檔加載結束后，運行這個函數(shù) createCode();//一開始先運行一遍取隨機數(shù)的函數(shù) $("#js5-btn").click(function () {//這里是一個點擊事件 console.log(window.randomCode); //這里寫了一個必報，window.randomCode是在文檔里面找到這個dom，否則上文的四個隨機數(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()方法是把小寫轉換成大寫 console.log(authInput); console.log(randomCode); console.log(user,psd); if (randomCode===authInput) { //驗證驗證碼，在驗證碼輸入框與驗證碼的值不相等之前，是不會進入下面登錄的步驟的，驗證碼是第一步關卡 var firstAjax = new XMLHttpRequest(); //創(chuàng)建ajax對象，這里是ajax跨域的部分 firstAjax.open("POST", "這里是你url跨域的地址", true); //連接服務器，跨域。 firstAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應該包含在通過后續(xù) send() 調用而發(fā)布的請求中。 //可以理解為，這是http的請求頭，固定格式，位置必須要在open之后，send之前。 firstAjax.send("name=" + user + "&pwd=" + psd); //在使用POST方式時參數(shù)代表著向服務器發(fā)送的數(shù)據(jù)，前面兩個是賬號框和密碼框 firstAjax.onreadystatechange = function () {//當參數(shù)被傳入服務器的時候，引用監(jiān)聽事件。 if (firstAjax.readyState == 4) {//readyState四種狀態(tài)，當執(zhí)行四步完成之后 if (firstAjax.status == 200) {//返回的是200，代表成功，404未找到。 var returnValue = JSON.parse(firstAjax.responseText);//取回由服務器返回的數(shù)據(jù) console.log(returnValue); if (returnValue.code == 0) {//這里是后端定義的，當code==0的時候，代表登錄正確。 window.location.; //后端返回的數(shù)據(jù)驗證成功就跳轉鏈接。 } else { $("#js5Message").text(returnValue.message);//當code不等于0時，返回出錯信息 } } else { alert("出錯咯，咯咯咯");//返回的不是200的時候，出錯。 } } }; createCode();//點擊登錄按鈕，驗證之后會刷新驗證碼 } else { $("#js5Message").text("驗證碼錯誤，請重新輸入"); createCode();//驗證碼錯誤，刷新驗證碼。 } })});這是是angular代碼實現(xiàn)部分：
jq部分寫的詳細一點，這里也挺詳細的，如果不懂的話，可以回頭看看jq部分，原理都是一樣的，復制到本地自己多試試。
var enter=angular.module("myApp");enter.controller('enterCtrl',['$scope','$http','$state',function ($scope,$http,$state) { $scope.changeVerify=function () {//定義了一個點擊事件，獲取驗證碼 var authCode=""; var authCodeLength=4;//取幾個隨機數(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);//隨機取一位數(shù) authCode +=randomArray[index];//取四位數(shù)，并+相連 } $scope.showAuthCode=authCode;//賦值 console.log($scope.showAuthCode); }; //上面是封裝的獲取驗證碼的函數(shù)，會在下面進行調用 (function () { $scope.changeVerify();//調用點擊事件。 $scope.enter=function (userName,userPsd) { //點擊登錄按鈕事件，將雙向綁定的賬號密碼當做參數(shù)傳入函數(shù) if ($scope.writeCode.toUpperCase() ==$scope.showAuthCode){//toUpperCase()將小寫轉化為大寫 //雙向綁定驗證碼輸入框，可以直接使用，這里是驗證驗證碼 $http({ method:"POST", url:"你的跨域地址",//$http的固定格式 params:{ "name":userName, "pwd":userPsd //雙向綁定的參數(shù)傳到下個頁面 } }).then(function (res) { //獲取服務器返回的參數(shù) console.log(res); if (res.data.code!==0){ //參數(shù)不為0的時候，彈出提示 alert(res.data.message); }else { //參數(shù)為0的時候，跳轉頁面 $state.go("home.studentList"); } }) }else { alert("驗證碼輸入錯誤咯，咯咯咯"); $scope.changeVerify();//驗證后，刷新驗證碼 } } }());后話
斷斷續(xù)續(xù)寫了兩天，現(xiàn)在寫的沒有之前那么快了。。差不多就以上這些內容，有問題可在評論區(qū)留言。有不足歡迎指導，拍磚。
以上所述是小編給大家介紹的使用jQuery,Angular實現(xiàn)登錄界面驗證碼詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
