JavaScript realizes the generation and verification of random codes

The generation and verification of random codes in JavaScript is for your reference. The specific contents are as follows

Since there are two ways to get the event source, both are attached here:

This is defined directly using var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random verification code verification</title>
    <style type="text/css">
        #code{
            width: 100px;
            height: 100px;
            background-color: #ddd;
            padding: 10px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            color: red;
            /*font-weight: bold;*/
        }
    </style>
</head>
<body>
    <div id="code"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="Validate">
    <script type="text/javascript">
        window.onload = function (){
            var code;
            // 1. Get the corresponding tag var codeDiv = document.getElementById("code");
            var newCodeInput = document.getElementById("newCode");
            var validate = document.getElementById("validate");

            // Load the page to get the corresponding verification code creatCode()

            // 1. Get an integer between min and max, 1~100
            function random(max,min){
                return Math.floor(Math.random()*(max-min)+min);
            }

            function createCode(){
                code = "";
                // Set the length var codeLenth = 4;
                var randomCode =[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<codeLenth;i++){
                    // Set the random range to 36 range var index = random(0,36);
                    code += randomCode[index];
                }
                codeDiv.innerHTML = code;
            }
            // Validation button validation validate.onclick = function (){
                // Get the verification code entered by the user var newCode = newCodeInput.value.toUpperCase();
                if (newCode === code){
                    //Verify that the corresponding URL is successfully jumped window.location.href = "http://www.baidu.com";
                }else {
                    // Verification failed alert("Verification failed, please re-enter")
                    // Empty the input box newCodeInput.value = "";
                    // Get the verification code again creatCode();
                }
            }
        }
    </script>
</body>
</html>

This is how to define variables using function:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Random verification code verification</title>
    <style type="text/css">
        #code{
            width: 100px;
            height: 100px;
            background-color: #ddd;
            padding: 10px;
            line-height: 100px;
            text-align: center;
            font-size: 20px;
            color: red;
            /*font-weight: bold;*/
        }
    </style>
</head>
<body>
    <div id="code"></div>
    <input type="text" name="" id="newCode">
    <input type="button" name="" id="validate" value="Validate">
    <script type="text/javascript">
        window.onload = function (){
            var code;
            // 1. Get the corresponding tag (get the event source)
            function $(id){
                return typeof id === "string"?document.getElementById(id):null;
            }

            // Load the page to get the corresponding verification code creatCode()

            // 1. Get an integer between min and max, 1~100
            function random(max,min){
                return Math.floor(Math.random()*(max-min)+min);
            }

            function createCode(){
                code = "";
                // Set the length var codeLenth = 4;
                var randomCode =[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<codeLenth;i++){
                    // Set the random range to 36 range var index = random(0,36);
                    code += randomCode[index];
                }
                $("code").innerHTML = code;
            }
            // Validation button check $("validate").onclick = function () {
                // Get the verification code entered by the user var newCode = $("newCode").value.toUpperCase();
                if (newCode === code){
                    //Verify that the corresponding URL is successfully jumped window.location.href = "http://www.baidu.com";
                }else {
                    // Verification failed alert("Verification failed, please re-enter")
                    // Empty the input box$("newCode").value = "";
                    // Get the verification code again creatCode();
                }
            }
        }
    </script>
</body>
</html>

Both methods achieve the same effect. Attached is the effect picture:

When you enter incorrect data for verification, you will be prompted:

When you enter the correct data for verification, click Verify. If the verification is successful, you will be redirected to the specified path.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: