jQuery —— 自定义四位数验证弹框

2023-12-20 13:18:44

在提交表单发送请求前，想要校验下，但不想用第三方插件，就自己写了个自定义数字校验码弹框，更稳定些，样式有点low，记录下。

没什么硬性要求的话，可以使用第三方插件，会方便许多样式也会更加美观。

支持移动端的jQuery滑块式验证码插件🔍

jQuery —— 自定义四位数验证弹框代码示例：

头部代码👇

<head>  
<title>四位数验证弹框示例</title>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
</head>

HTML代码👇

 <button id="submit-button">提交</button>  
  <div id="validation-modal"></div> <!-- 遮罩层 -->  
  <div id="validation-box"> <!-- 校验框 -->  
    <h3>请输入四位数的校验码</h3> <!-- 标题 -->  
    <span id="validation-code"></span> <!-- 显示生成的校验码 -->  
    <input type="text" id="input-code" placeholder="请输入校验码"> <!-- 输入框 -->  
    <button id="validate-button">验证</button> <!-- 验证按钮 -->  
  </div> <!-- /校验框 -->

JS代码👇

      $(document).ready(function() {
        var generateCode = function() {
            var digits = '0123456789';
            var code = '';
            for (var i = 0; i < 4; i++) {
                code += digits.charAt(Math.floor(Math.random() * 10));
            }
            return code;
        };
        $(document).on('click','.submit-button',function () {
            // 重置输入框值
            $('#input-code').val('');
            // 生成四位随机数字作为校验码并显示在校验框中
            var code = generateCode();
            $('#validation-code').text(code);
            // 显示校验框和遮罩层
            $('#validation-modal').show();
            $('#validation-box').show();
            // 将输入框获取焦点，方便用户输入验证码
            $('#input-code').focus();
            $('#validate-button').click(function() {
                var inputCode = $('#input-code').val();
                if (inputCode !== $('#validation-code').text()) {
                    // 输入的校验码不正确，弹出警告并隐藏校验框和遮罩层，并阻止表单提交操作
                    layer.msg('输入的校验码不正确！');
                    $('#validation-modal').show();
                    $('#validation-box').show();
                    // 重置输入框值
                    $('#input-code').val('');
                    return false;
                } else {
                    // 输入的校验码正确，隐藏校验框和遮罩层并继续提交下面的代码
                    $('#validation-modal').hide();
                    $('#validation-box').hide();
                    // 在这里添加您需要提交的代码逻辑  
                    // ...  
                    // alert('校验码验证成功！');
                    return true;
                }
            });
        });
    });

CSS代码👇

 #validation-modal {  
      display: none;  
      position: fixed;  
      top: 0;  
      left: 0;  
      width: 100%;  
      height: 100%;  
      background-color: rgba(0, 0, 0, 0.5);  
      z-index: 999;  
    }  
    #validation-box {  
      position: absolute;  
      top: 50%;  
      left: 50%;  
      transform: translate(-50%, -50%);  
      background-color: #fff;  
      padding: 20px;  
      border-radius: 5px;  
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);  
    }  
    #validation-box h3 {  
      text-align: center;  
      margin-bottom: 20px;  
    }  
    #validation-box input[type="text"] {  
      width: 100%;  
      padding: 10px;  
      margin-bottom: 20px;  
      border-radius: 5px;  
      border: 1px solid #ccc;  
    }  
    #validation-box button {  
      width: 100%;  
      padding: 10px;  
      background-color: #4CAF50;  
      color: #fff;  
      border: none;  
      border-radius: 5px;  
      cursor: pointer;  
    }  
    #validation-box button:hover {  
      background-color: #45a049;  
    }

效果图如👇

当用户点击验证按钮时，我们首先检查输入的校验码是否与生成的校验码匹配。如果匹配，我们隐藏校验框并继续提交下面的代码逻辑；如果不匹配，我们弹出警告并隐藏校验框。这样，用户在验证成功后就可以关闭校验框并继续下面的操作。

文章来源:https://blog.csdn.net/qq_53895518/article/details/135102516
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。