您好,我正在实现一个登录页面,从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>
将事件绑定到表单的提交(注意:并非单击提交按钮)。那就是您的代码去检查表单的地方,并在必要时阻止其发布。
$('#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>