前端验证码示例

最新推荐文章于 2024-08-19 09:29:46 发布

Tin9898

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量390

点赞数 9

分类专栏： javascript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_61818443/article/details/136548863

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title>验证码示例</title>
  <style>
    #captcha {
      border: 1px solid #000;
      width: 50px;
      display: inline-block;
      user-select: none; /* 禁止选择文本 */
    }
  </style>
</head>
<body>
  <h2>请输入账号密码和验证码</h2>
  <form id="loginForm">
    <div>
      <label for="username">账号：</label>
      <input type="text" id="username" onblur="validateUsername()">
      <span id="usernameError" style="color: red"></span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" onblur="validatePassword()">
      <input type="checkbox" id="showPassword" onchange="togglePasswordVisibility()">
      <label for="showPassword">显示密码</label>
      <span id="passwordError" style="color: red"></span>
    </div>
    <div>
      <label for="captcha">验证码：</label>
      <input type="text" id="captchaInput" oncopy="return false" onpaste="return false">
      <span id="captcha" style="border: 1px solid #000; padding: 2px 5px;"></span>
      <button type="button" onclick="refreshCaptcha()">刷新</button>
    </div>
    <button type="button" onclick="login()">登录</button>
  </form>

  <script>
    // 生成4位随机验证码
    function generateCaptcha() {
      let captcha = '';
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      for (let i = 0; i < 4; i++) {
        captcha += characters.charAt(Math.floor(Math.random() * characters.length));
      }
      return captcha;
    }

    // 刷新验证码
    function refreshCaptcha() {
      const captcha = generateCaptcha();
      document.getElementById('captcha').innerText = captcha;
    }

    // 验证账号
    function validateUsername() {
      const username = document.getElementById('username').value;
      const usernameError = document.getElementById('usernameError');
      if (!/^\d{6}$/.test(username)) {
        usernameError.innerText = '账号必须为6位数字';
      } else {
        usernameError.innerText = '';
      }
    }

    // 验证密码
    function validatePassword() {
      const password = document.getElementById('password').value;
      const passwordError = document.getElementById('passwordError');
      if (password.length < 8 || password.length > 12) {
        passwordError.innerText = '密码长度必须在8到12位之间';
      } else {
        passwordError.innerText = '';
      }
    }

    // 切换密码可见性
    function togglePasswordVisibility() {
      const passwordInput = document.getElementById('password');
      passwordInput.type = document.getElementById('showPassword').checked ? 'text' : 'password';
    }

    // 登录验证
    function login() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      const inputCaptcha = document.getElementById('captchaInput').value.toLowerCase();
      const generatedCaptcha = document.getElementById('captcha').innerText.toLowerCase();

      // 验证账号和密码
      if (!/^\d{6}$/.test(username)) {
        document.getElementById('usernameError').innerText = '账号必须为6位数字';
        return;
      } else {
        document.getElementById('usernameError').innerText = '';
      }
      if (password.length < 8 || password.length > 12) {
        document.getElementById('passwordError').innerText = '密码长度必须在8到12位之间';
        return;
      } else {
        document.getElementById('passwordError').innerText = '';
      }

      // 验证验证码
      if (inputCaptcha === generatedCaptcha) {
        alert('验证码正确，跳转至百度页面');
        window.location.href = 'https://www.baidu.com'; // 跳转至百度页面
      } else {
        alert('验证码错误');
      }
    }

    // 初始化时生成验证码
    document.getElementById('captcha').innerText = generateCaptcha();
  </script>
</body>
</html>