实现验证码功能是网站注册、登录等操作中常见的一项安全措施。本文将介绍如何使用原生JS实现验证码功能，包括以下几个步骤：
- 生成随机验证码。
- 将随机验证码渲染到页面上。
- 监听用户输入的验证码，进行验证。
- 刷新验证码。
生成随机验证码
要实现验证码功能，首先需要生成一个随机的验证码字符串。可以使用Math.random()和String.fromCharCode()方法，结合循环语句来生成一个包含大小写字母和数字的随机字符串，例如：
function generateCode(){
var code = '';
for(var i=0; i<4; i++){
var num = Math.floor(Math.random() * 62);
if(num < 10){
code += num; //数字
}else if(num < 36){
code += String.fromCharCode(num + 55); //大写字母
}else{
code += String.fromCharCode(num + 61); //小写字母
}
}
return code;
}
这段代码中使用了循环语句并结合Math.random()方法来生成一个0到61之间的随机整数，根据数字大小指定字符类型，从而生成随机字符串。其中数字对应0-9，大写字母对应A-Z，小写字母对应a-z。
将随机验证码渲染到页面上
有了随机验证码字符串之后，就需要将其渲染到页面上。可以使用innerHTML属性来修改HTML元素的内容，例如：
<!-- 验证码显示区域 -->
<div id="code"></div>
<!-- 刷新验证码按钮 -->
<button onclick="refreshCode()">刷新验证码</button>
<script>
window.onload = function(){
var code = generateCode();
document.getElementById('code').innerHTML = code;
}
function refreshCode(){
var code = generateCode();
document.getElementById('code').innerHTML = code;
}
</script>
这段代码中，首先使用window.onload事件，在网页加载完成后自动执行一次生成随机验证码的函数，并将生成的验证码字符串渲染到id为“code”的div元素中。然后为刷新验证码按钮绑定了一个refreshCode()函数，当用户点击按钮时，再次生成随机验证码，并将其渲染到对应的div元素中。
监听用户输入的验证码，进行验证
要实现验证码验证功能，可以为验证码输入框绑定一个onblur事件，当用户离开输入框时，自动进行验证。例如：
<!-- 验证码输入框 -->
<input type="text" id="input_code" onblur="checkCode()">
<script>
function checkCode(){
var inputCode = document.getElementById('input_code').value;
var code = document.getElementById('code').innerHTML;
if(inputCode.toUpperCase() != code.toUpperCase()){
alert('验证码不正确！');
}
}
</script>
这段代码中，当用户离开输入框时，会自动执行checkCode()函数。该函数首先获取用户输入的验证码和生成的验证码字符串，使用toUpperCase()方法将它们转换为大写字母，再进行比较，如果不相等，则提示用户验证码不正确。
刷新验证码
最后是刷新验证码的功能，已经在第二个步骤中介绍了如何刷新验证码，这里再次提出。可以为刷新验证码按钮绑定一个onclick事件，点击按钮时重新生成新的验证码字符串，并渲染到页面上，例如：
<!-- 验证码显示区域 -->
<div id="code"></div>
<!-- 刷新验证码按钮 -->
<button onclick="refreshCode()">刷新验证码</button>
<script>
window.onload = function(){
refreshCode();
}
function refreshCode(){
var code = generateCode();
document.getElementById('code').innerHTML = code;
document.getElementById('input_code').value = '';
}
</script>
这段代码中，当用户点击刷新验证码按钮时，重新生成新的验证码字符串，并将它渲染到页面上，同时清空验证码输入框中的内容。
示例说明
下面提供两个示例说明：
示例1
<!-- 验证码显示区域 -->
<div id="code"></div>
<!-- 验证码输入框 -->
<input type="text" id="input_code" onblur="checkCode()">
<!-- 刷新验证码按钮 -->
<button onclick="refreshCode()">刷新验证码</button>
<script>
window.onload = function(){
refreshCode();
}
function generateCode(){
var code = '';
for(var i=0; i<4; i++){
var num = Math.floor(Math.random() * 62);
if(num < 10){
code += num; //数字
}else if(num < 36){
code += String.fromCharCode(num + 55); //大写字母
}else{
code += String.fromCharCode(num + 61); //小写字母
}
}
return code;
}
function refreshCode(){
var code = generateCode();
document.getElementById('code').innerHTML = code;
document.getElementById('input_code').value = '';
}
function checkCode(){
var inputCode = document.getElementById('input_code').value;
var code = document.getElementById('code').innerHTML;
if(inputCode.toUpperCase() != code.toUpperCase()){
alert('验证码不正确！');
}
}
</script>
这个示例演示了如何实现一个包含验证码显示区、验证码输入框以及刷新验证码按钮的完整验证码功能模块。
示例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证码示例</title>
</head>
<body>
<div id="code">生成的验证码将显示在这里</div>
<button onclick="refreshCode()">点击生成新的验证码</button>
<button onclick="checkCode()">验证</button>
<input type="text" id="input_code" placeholder="请输入验证码">
<div id="result"></div>
<script>
function generateCode(){
//生成验证码的代码省略
}
function refreshCode(){
var code = generateCode();
document.getElementById('code').innerHTML = code;
}
function checkCode(){
var inputCode = document.getElementById('input_code').value;
var code = document.getElementById('code').innerHTML;
if(inputCode.toUpperCase() == code.toUpperCase()){
document.getElementById('result').innerHTML = '验证通过！';
}else{
document.getElementById('result').innerHTML = '验证码不正确！';
}
}
refreshCode();
</script>
</body>
</html>
这个示例演示了如何将验证码功能嵌入到一个网页中，方便用户直接在该页面进行验证码验证。其中包含了生成验证码、刷新、验证码输入框和结果显示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现验证码功能 - Python技术站
微信扫一扫 
支付宝扫一扫 