在提交到php之前验证表单

Question

您好，我正在实现一个登录页面，从 PHP 端一切正常，但现在我将使用 jQuery 实现另一个功能：我想检查登录字段是否为空，如果不是，则打印一些内容页面，否则继续用php，怎么办？

这是我的 HTML 代码的一部分：

<form id="loginForm" action="login-exec.php" name="loginForm" method="post" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
    <fieldset>
        <div data-role="fieldcontain">
            <label class="ui-input-text" for="login">Login:</label>
            <input name="login" type="text" class="textfield" id="login" />
        </div>                                  
        <div data-role="fieldcontain">                                      
            <label class="ui-input-text" for="password">Password:</label>
            <input name="password" type="password" class="textfield" id="password"/> 
        </div>
        <input type="submit" name="Submit" value="Login" />
    </fieldset>
</form>     

Answer 1

将事件绑定到表单的提交（注意：不是单击提交按钮）。这就是您的代码检查表单的地方，并在必要时阻止它被发布。

$('#loginForm').on('submit', function(e){
    if ($('#login').val()=='' || $('#password').val()==''){
        e.preventDefault();
        // alert('Fill in both fields');
        // You can use an alert or a dialog, but I'd go for a message on the page
        $('#errormsg').text('Fill in both fields').show();
    }else{
        // do nothing and let the form post
    }
});

如果您更喜欢显示消息而不是使用对话框，请在页面的某处，最好在提交按钮附近添加 errormsg div

<p id="errormsg" style="display:none;"></p>