Question

我在我的ResetPassword函数中进行了验证，这项工作几乎没问题，但是当我在代码中添加验证时遇到了一些问题。

当我在输入领域写电子邮件地址而不是按下按钮时，它不会显示消息“我们向你发送消息”
当我在输入feild中写电子邮件地址而不是按下按钮时，它会在我的URL中显示电子邮件输入的值（localhost：xxxx / Account / Login？ResetEmail = test@test.com），它不应该这样做会在URL中显示值。

有人能指出我关于这2个问题的正确方向吗？

负责人：

<head>   
<script src="~/assets/js/jquery-1.10.2.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script></head>

HTML代码：

<div class="PopUpBG">
  <div class="PopUp">
    <h3 class="modal-title">
      <span>Reset PAssword</span>
    </h3>
    <form id="form">

      <input type="email" name="ResetEmail" id="ResetEmail" placeholder="Email Adresse" required/>

      <input type="submit" class="btn btn-success" value="Send" onclick="ResetPassword(this)"/>

    </form>
  </div>

</div>

ResetPassword＆amp;验证码：

function ResetPassword(e) {
    if (!$("#form").validate())
        return false;

    $.ajax({
        type: "POST",
        url: "/Account/loginRequestResetPassword",
        dataType: "json",
        data: {
            Email: $("#ResetEmail").val().trim(),
        },
        success: function () {
            console.log("send");
            $(".PopUp").html("We have sent mail to you");
            setTimeout(function () {
                $(".PopUpBG").fadeOut();
            }, 10000); // fadeout the message after a few seconds
        },
        error: function () {
            console.log('something went wrong - debug it!');
        }
    })
}

Answer 1

在提交按钮return false;的末尾添加onclick：

<input type="submit" class="btn btn-success" value="Send" onclick="ResetPassword(this); return false;" />

Answer 2

如果你想使用jquery。请扔掉元素中的onclick属性
使用e.preventDefault（）阻止表单以默认行为提交
不要将type=submit更改为type=button

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
</head>
<body>
<button id="open-reset" class="btn btn-info">Reset Password</button>
<div id="modal-reset" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Reset Password</h4>
      </div>
      <div class="modal-body">
        <form id="form">
            <input type="email" name="ResetEmail" class="input-medium" id="ResetEmail" placeholder="Email Adresse" required />
            <input type="submit" id="btn-submit" class="btn btn-primary" value="Reset Password"/>
        </form>
        <div class="PopUp"></div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function(){
    $('#form').submit(function(e) {
        e.preventDefault(); //prevent default form behaviour
        $(this).validate();
        var btn = $(this).find("#btn-submit");
        var btnText = btn.text();
        if ($(this).valid()){
            console.log('valid');
            $.ajax({
                type: "POST",
                url: "ajax.php",
                dataType: "json",
                data: {
                    Email: $("#ResetEmail").val().trim(),
                },
                beforeSend: function(){
                    btn.removeClass('btn-primary').addClass('btn-warning').prop('disabled', true).text('Loading...');
                },
                success: function (d) {
                    if(d['ok'] == 1){
                        btn.removeClass('btn-warning').addClass('btn-success').text('Success');
                        $(".PopUp").fadeIn().html("We have sent mail to you");
                        setTimeout(function(){
                            btn.removeClass('btn-success').addClass('btn-primary').prop('disabled', false).text(btnText);
                            $(".PopUp").fadeOut();
                        },2000);
                    }else {
                        btn.removeClass('btn-warning').addClass('btn-danger').text('Failed');
                        $(".PopUp").fadeIn().html("failed to reset password");
                        setTimeout(function(){
                            btn.removeClass('btn-danger').addClass('btn-primary').prop('disabled', false).text(btnText);
                            $(".PopUp").fadeOut();
                        },2000);
                    }
                },
                error: function (d) {
                    console.log(d.responseText);
                    btn.removeClass('btn-warning').addClass('btn-danger').text('Error');
                    $(".PopUp").fadeIn().html("Something wrong happened");
                    setTimeout(function(){
                        btn.removeClass('btn-danger').addClass('btn-primary').prop('disabled', false).text(btnText);
                        $(".PopUp").fadeOut();
                    },2000);
                }
            });
        }else{
            console.log('invalid');
        }

    });

    $('#open-reset').click(function(){
        $('#modal-reset').modal('show');
    })
})  
</script>

</body>
</html>

PHP

<?php 
$dummyJson = array('ok'=>1, 'whatever'=>'anything');
echo json_encode($dummyJson);
?>

重置密码 - 从

2 个答案: