javascript - 验证码失败显示警报但自动提交表单如何阻止此情况

标签 javascript php jquery forms

这是基本注册模块,我添加了验证码工作

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-register" role="form" id="register-form">
                    <div>
                        <input name="name" id="name" type="text" class="form-control" placeholder="User name"> 
                        <span class="help-block"></span>
                    </div>

                    <div>
                        <input name="email" id="email" type="email" class="form-control" placeholder="Email address" > 
                        <span class="help-block"></span>
                    </div>
                    <div>
                        <input name="password" id="password" type="password" class="form-control" placeholder="Password"> 
                        <span class="help-block"></span>
                    </div>
                    <div>
                        <input name="confirm_password" id="confirm_password" type="password" class="form-control" placeholder="Confirm Password"> 
                        <span class="help-block"></span>
                    </div>
       <div>
                    <td id="imgparent">
    <div id="imgdiv">
    <img id="img" src="captcha.php">
    </div>
    <img id="reload" src="images/reload.png">

    <input id="captcha1" name="captcha" type="text" class="form-control" placeholder="Enter captcha">
    </td>
    </tr>
            <span class="help-block"></span>
                    </div> 
                    <button class="btn btn-block bt-login" id="button" type="submit">Sign Up</button>

                    <h4 class="text-center login-txt-center">Alternatively, you can log in using:</h4>

                    <a class="btn btn-default facebook_rnd" href="login.php?type=facebook"> <i class="fa fa-facebook modal-icons-rnd"></i> </a>  
                    <a class="btn btn-default google_rnd" href="login.php?type=google"> <i class="fa fa-google-plus modal-icons-rnd"></i> </a>  

                </form>

这是register.js

$(document).ready(function(){

    $("#register-form").validate({
        submitHandler : function(e) {
            $(form).submit();
        },
        rules : {
            name : {
                required : true
            },
            email : {
                required : true,
                email: true,
                remote: {
                    url: "check-email.php",
                    type: "post",
                    data: {
                        email: function() {
                            return $( "#email" ).val();
                        }
                    }
                }
            },
            password : {
                required : true
            },
            confirm_password : {
                required : true,
                equalTo: "#password"
            }
        },
        messages : {
            name : {
                required : "Please enter name"
            },
            email : {
                required : "Please enter email",
                remote : "Email already exists"
            },
            password : {
                required : "Please enter password"
            },
            confirm_password : {
                required : "Please enter confirm password",
                equalTo: "Password and confirm password doesn't match"
            }
        },
        errorPlacement : function(error, element) {
            $(element).closest('div').find('.help-block').html(error.html());
        },
        highlight : function(element) {
            $(element).closest('div').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
             $(element).closest('div').removeClass('has-error').addClass('has-success');
             $(element).closest('div').find('.help-block').html('');
        }
    });


});

它用于验证码js

// JavaScript Document

$(document).ready(function() {
// Change CAPTCHA on each click or on refreshing page.
$("#reload").click(function() {
$("#img").remove();
$('<img id="img" src="captcha.php" />').appendTo("#imgdiv");
});
// Validation Function
$('#button').click(function() {
var name = $("#username1").val();
var email = $("#email1").val();
var captcha = $("#captcha1").val();
if (name == '' || email == '' || captcha == '') {

} else {
// Validating CAPTCHA with user input text.
var dataString = 'captcha=' + captcha;
$.ajax({
type: "POST",
url: "verify.php",
data: dataString,
success: function(html) {

      if ($.trim(captcha) == '2') {
                        alert('Entered code is wrong');
                        reloadCaptcha();
                        return false;
                    }
                    validated = true;
                    $("#button").submit();

alert(html);
}
});
}
});
});

这里,当所有验证都工作正常,但如果验证码错误,那么它还会提交表单,为什么?>>

CAPTCHA磨损时如何停止并返回表单?

最佳答案

您在这里所做的事情绝不是您想要使用验证码所做的事情。

验证码存在的原因是为了防止恶意表单提交,这意味着如果没有有效的验证码,您将无法向服务器提交任何数据。但是,您要做的是在 Javascript 中验证验证码,然后提交表单。

没有什么可以阻止某人手动调用 $('#button').submit() 将他们喜欢的任何数据推送到服务器。验证码本质上是没有用的;它就像一扇周围没有墙的门。

您需要重新实现您的验证码解决方案,以便在服务器端进行验证,无论您的表单提交到何处。首先验证验证码,然后处理表单提交。

你可以使用这样的东西:

session_start();
if($_POST['captcha'] != $_SESSION['<insert Captcha Session key here>']) { /* invalid captcha */ }

关于javascript - 验证码失败显示警报但自动提交表单如何阻止此情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28294175/

相关文章:

php - 避免重复值并在 mysql 数据库中的同一行中获取其他数据集

php - "SQLSTATE[HY000]: General error"- 一条语句中的多个 SQL 查询

jQuery UI 悬停重复

javascript - 在带有 event.code 的 switch 语句中使用 JavaScript 运算符

javascript - Jcrop 不适用于 bootstrap 3 模态

php - php/mysql中处理大量数据

javascript - 停止 element.style 覆盖我的 css 样式

javascript - 使用 JQuery 和 append() 将包含带空格的文本的数组添加到 TextArea 中

javascript - 从大文件流式传输并创建数组

javascript - Lodash 拒绝点免费