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

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

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

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

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

头部代码

HTML代码

 提交  
  
   
  
   
    
请输入四位数的校验码
   
       
       
    验证   
  
   

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;  
    }  

效果图如

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