寫在前面：
前段事件，做了一個用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 。