How to make verification code in javascript-JS Tutorial-php.cn

How to make verification code in javascript

王林

Release： 2021-10-26 16:54:07

Original

3671 people have browsed it

Javascript method to create verification code: [var code; window.onload = function creatCode() { code=""; var codeLength = 4; var checkCode = ...}].

How to make verification code in javascript

#The operating environment of this article: windows10 system, javascript 1.8.5, thinkpad t480 computer.

Use javascript to implement the login verification code function. The following is the specific implementation code:

test.html

<!DOCTYPE html>
<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
    <title>验证码</title>   
    <script src = "checkCode.js">   </script>  
</head>  
<body>  
    <div>  
        <input type = "text" id = "input"/>  
        <input type = "button" id="code" οnclick="createCode()"/>  
        <input type = "button" value = "验证" onclick = "validate()"/>  
    </div>  
</body> 
</html>

Copy after login

checkCode.js

var code ; //在全局定义验证码   
  
window.onload = function createCode(){  
     code = "";   
     var codeLength = 4;//验证码的长度  
     var checkCode = document.getElementById("code");   
     var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,&#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,  
     &#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,&#39;Z&#39;);//随机数  
     for(var i = 0; i < codeLength; i++) {//循环操作  
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
        code += random[index];//根据索引取得随机数加到code上  
    }  
    checkCode.value = code;//把code值赋给验证码  
}  
//校验验证码  
function validate(){  
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写        
    if(inputCode.length <= 0) { //若输入的验证码长度为0  
        alert("Empty Code!"); //则弹出请输入验证码  
    }         
    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
        alert("Error Code"); //则弹出验证码输入错误  
        createCode();//刷新验证码  
        document.getElementById("input").value = "";//清空文本框  
    }         
    else { //输入正确时  
        alert("OK"); //弹出^-^  
    }             
}

Copy after login

When clicked Code that does not move the position:

1	`<p` `class="red"><a href="javascript:;"` `οnclick="createCode()">看不清？</a></p>`

Copy after login

Recommended learning: javascript video tutorial

The above is the detailed content of How to make verification code in javascript. For more information, please follow other related articles on the PHP Chinese website!