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
Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS
7 ways to implement a two-column layout with fixe...
js to achieve simple magnifying glass effects
This article example shares the specific code of ...
Solution to the problem of too high penetration of input and textarea levels in WeChat applet
The WeChat mini-program native components camera,...
Analysis and solution of flex layout collapse caused by Chrome 73
Phenomenon There are several nested flex structur...
How to set the number of mysql connections (Too many connections)
During the use of mysql, it was found that the nu...
Native JS to achieve sliding button effect
The specific code of the sliding button made with...
Detailed explanation of the use of $emit in Vue.js
1. Parent components can use props to pass data t...
Detailed explanation of how to install MariaDB 10.2.4 on CentOS7
CentOS 6 and earlier versions provide MySQL serve...
Notes on Using Textarea
Why mention textarea specifically? Because the tex...
jQuery implements dynamic tag event
This article shares the specific code of jQuery t...
Detailed explanation of the WeChat applet request pre-processing method
question Because some of our pages request data i...
Example code of vue custom component to implement v-model two-way binding data
In the project, you will encounter custom public ...
Detailed tutorial on downloading mysql on Windows 10
MySQL versions are divided into Enterprise Editio...
Create a movable stack widget function using flutter
This post focuses on a super secret Flutter proje...
Solution to the failure of MySQL to use innobackupex to backup the connection server
What should I do if MySQL fails to connect to the...