Question

我正在更改我的登录页面，并且我已将表单验证的jquery放在单独的文件中，而不是放在页面本身上。

$(document).ready(function(){
    $("#confirm").on("click", function(e){
       e.PreventDefault();

        var check = true;
        var empty_fields = ['name','password'];

        for (i=0; i<empty_fields.length; i++) {
            var $field = $('#'+empty_fields[i]);

            if ($.trim($field.val()) == '') {
                $field.addClass('error');
            check = false;
            } 
            else {
                $field.removeClass('error');
            }            
        }

        if (check == true)
        {
            $.ajax({
                type: 'POST',              
                url: 'PHPCalls.php?CallID=Login',
                data: $("#loginform").serialize(),
                success: function(data) {                    
                    var result = $.trim(data);
                    if(result == 'true') {
                        alert('succeeded');
                    }
                }
            });
        }
    });
});

在我执行的部分之前，检查输入为空是在登录页面本身并且工作正常。我用onclick =“return check_form（）;”调用它。然后返回值'check'为true或false。

由于我已将此脚本放在单独的文件中，因此页面似乎正在重新加载。当我点击确认按钮时，输入框会出现错误布局，但页面会闪烁，所有内容都恢复正常......我不知道发生了什么......

任何人都可以让我走上正轨吗？

这是登录页面的剥离部分

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/ajaxLogin.js"></script>
    <script type="text/javascript" src="js/sha512.js"></script>
    <script type="text/javascript" src="js/forms.js"></script>
</head>
<body>
<form name="loginform" class="loginform" action="#" method="post">
    <input type="text" name="name" id="name" class="input username"  placeholder="Name" onfocus="this.value=''" />
    <input type="password" name="password" id="password" class="input password"  placeholder="Wachtwoord" onfocus="this.value=''" />
    <input type="submit" id="confirm" value="Login" class="button" />
</form>
</body>

解决方案：添加PreventDefault（）并删除formhash（）

Answer 1

如果检查你需要返回false！ = true

Answer 2

if (check == true)
    {
        $.ajax({
            type: 'POST',              
            url: 'PHPCalls.php?CallID=Login',
            data: $("#loginform").serialize(),
            success: function(data) {                    
                var result = $.trim(data);
                if(result == 'true') {
                    alert('succeeded');
                }
            }
        });
    }
else
{
    return false;
}

试试这个

似乎登录页面在错误的表单验证后重新加载

2 个答案: