原生js实现验证码功能

实现验证码功能是网站注册、登录等操作中常见的一项安全措施。本文将介绍如何使用原生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技术站