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:
|
<<: Detailed explanation of the use of mysql explain (analysis index)
>>: This article summarizes the implementation methods of 6 load balancing technologies (summary)
Recommend
Kali Linux installation VMware tools installation process and VM installation vmtools button gray
Xiaobai records the installation of vmtools: 1. S...
Detailed introduction to logs in Linux system
Table of contents 1. Log related services 2. Comm...
Summary of knowledge points related to null (IFNULL, COALESCE and NULLIF) in MySQL
This article uses examples to explain the knowled...
How to introduce img images into Vue pages
When we learn HTML, the image tag <img> int...
How MySQL supports billions of traffic
Table of contents 1 Master-slave read-write separ...
Detailed explanation of the difference between cesllspacing and cellpadding in table
What is a table? It is composed of cell cells. In...
Implementation code of html floating prompt box function
General form prompts always occupy the form space...
How to use CocosCreator object pool
Table of contents Preface: Specific operations St...
Implementation of k8s deployment of docker container
Environment: (docker, k8s cluster), continue with...
JS implements the snake game
Table of contents 1. Initialization structure 2. ...
Overview of the basic components of HTML web pages
<br />The information on web pages is mainly...
Summary of problems that may occur when using JDBC to connect to Mysql database
First, clarify a few concepts: JDBC: Java databas...
Detailed tutorial on building a local idea activation server
Preface The blogger uses the idea IDE. Because th...
Detailed explanation of the role and working principle of MySQL master-slave replication
1. What is master-slave replication? Master-slave...
A brief introduction to the usage of decimal type in MySQL
The floating-point types supported in MySQL are F...