驗證碼

驗證碼有很多種類，有圖片，字串，簡訊…首先，我們一般不能使用JS來實現驗證，一般都是後臺返回的，要不使用者可以直接禁用JS，跳過驗證，而且客戶端實現的都是不安全的。這裡我們使用JS來模擬驗證碼。

生成一個隨機四位數的驗證碼

需求：隨機生成一個包含字母或數字的四位數驗證碼

思路

思路一

1. 我們可以定義一個包含所有數字和字母的字串str
2. 獲取它的長度str.length
3. 在[0,str.length-1]的區間內隨機生成一個數字num
4. 通過隨機位置num返回當前指定的字串，str.charAt(num)
5. 生成四個後，拼接成一個新的字串(concat)
6. 這種方法可行不可取，程式碼可讀性不強

思路二

1. 可以利用字串和正則表示式，和上面的方式都是半斤八兩

思路三

• 利用unicode編碼
• 我們可以檢視unicode編碼可知驗證碼對應的編碼都是數字

0-9  A-Z   a-z對應的unicode是 48-57  65-90  97-122

• 而Math.random()產生的隨機數也是數字，那我們生成隨機在[48,122]區間的unicode編碼

function ranNum(min,max){
		return parseInt(Math.random()*(max-
 
min+1)+min)
	}
	console.log(ranNum(48,122))

• 我們可以利用fromCharCode將unicode返回成我們想要的驗證碼

String.fromCharCode(numX,numX,...,numX)
fromCharCode() 可接受一個指定的 Unicode 值，然後返回一個字串。

• 最終版

1. 過濾掉產生隨機數[48,122]不是在 48-57,65-90,97-122範圍內
2. 將產生四個隨機的數，放入一個數組中
3. 將陣列切為字串放入到fromCharCode中
4. 程式碼整改的最終效果

<script>
	function ranNum(min,max){
		return function(){
			// 利用閉包，等我們需要產生隨機數在呼叫
			return parseInt(Math.random()*(max-min+1)+min)
		}
	}
	// 即將產生在48-122區間的隨機的一個unicode編碼，未呼叫
	var myUni = ranNum(48,122)
	// 用來裝四個符合[0-9a-zA-Z]的unicode編碼
	var arr = []
	// 產生四個unicode放入arr陣列中
	// 當arr沒有裝滿四個時
	while(arr.length!==4){
		// 產生一個隨機碼
		var num = myUni()
		// 符合需求在48-57,65-90,97-122的隨機數放入arr陣列中，知道arr裝滿四個
        if (num >= 48 && num <= 57 || num >= 65 && num <= 90 || num >= 97 && num <= 122){
              arr.push(num)
        }
	}
	// 此時拿到了隨機的四個unicode
	// 利用String.fromCharCode
	// 可以使用arr.join(',')切割字串，也可以使用apply
	var authCode = String.fromCharCode.apply(null,arr)
	console.log(authCode)
</script>

5. 提醒

• 記不住unicode可以利用字串方法charCodeAt(),該方法返回當前指定位置的字串的Unicode編碼
• 可以利用畫布或則css3更豐富的寫到頁面上

其它驗證碼

1. 當然也可以隨機實現漢字，漢字的unicode在/ \u4e00-\u9fa5/區間
2. 圖片滑動驗證的話，可以通過client來定位