I've shared how to use it before H5+Javascript generate verification code (click to see my previous blog). Today, I want to share how to generate a set of verification codes by using random numbers, and verify whether the input verification codes match through js code.
First look at the renderings:
The overall effect is: click the "verification button" or click the verification code itself, and the verification code will be regenerated.
If you enter any characters in the input box that do not match the verification code, you will be prompted "verification code input error".
When the characters entered in the input box (Note: case insensitive here) are consistent with the verification code, the prompt "correct input" will be prompted.
Look at the code:
html code (because css style is simple, there is no special reference to css file):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#code
{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script><!--Casually quoted jq-->
<script type="text/javascript" src="js/checkCode.js" ></script><!--Self written verification method-->
</head>
<body>
<div>
<input type = "text" id="input1"/>
<input type = "button" id="code" />
<input type = "button" id="yz" value = "Verification" />
</div>
</body>
</html>
checkCode.js Code:
var code ; //Define verification code globally
//Generate verification code
$(function(){
window.onload = createCode("#code");
$("#code").click(function(){
createCode("#code");
});
$("#yz").click(function(){
validate("#input1","#code");
});
});
//Generate verification code
function createCode(code1){
code = "";
var codeLength = 4;//Length of verification code
var checkCode =$(code1);
var random = new Array(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');//random number
for(var i = 0; i < codeLength; i++) {//Cyclic operation
var index = Math.floor(Math.random()*36);//Get index of random number (0 ~ 35)
code += random[index];//Get random number according to index and add it to code
}
checkCode.val(code);//Assign code value to verification code
}
//Verification
function validate(txtinput,code1){
var inputCode = $(txtinput).val().toUpperCase(); //Get the input verification code and convert it to uppercase
if(inputCode.length <= 0) { //If the length of the verification code entered is 0
alert("Please enter the verification code!"); //Please enter the verification code
}
else if(inputCode != code ) { //If the input verification code is inconsistent with the generated verification code
alert("Verification code input error!"); //The pop-up verification code input error
createCode(code1);//Refresh verification code
$(txtinput).val("");//Empty text box
}
else { //When the input is correct
alert("Input correct"); //Pop up ^
}
}