如何使用 jQuery 进行操作:
这不是万无一失的,因为浏览器总是可以决定不运行这个 js 片段,但仍然有用,因为它在提交表单(并等待服务器响应)之前通知用户,所以这主要是为了节省一些带宽,因为这可以防止对服务器的无用请求。
Useless requests
表示此处的 HTTP 请求(表单提交)返回消息,要求用户勾选一个复选框,然后再次提交相同的数据。
$(document).ready(function() {
// Catch submit events:
$('form').submit(function() {
// Check if checkbox is checked:
if ($('#checkme').is(':checked')) {
// Allow form submit:
return true;
} else {
// Prevent form submit:
alert('You must check the Approve checkbox to continue!');
return false;
}
});
});
请参阅如何使用 PHP标题<form>
下的示例。
上面的客户端解决方案基于tomhallam的答案,将其修改为更小、更简单、更完整,并遵循更好的 jQuery 建议。
如何使用 PHP 做到这一点:
在服务器端做同样的检查总是好的,在这种情况下使用 PHP。无论客户端是否缺乏对 Javascript 或服务器定义的任何其他客户端检查方法的支持,服务器端检查都能保证真正检查值。
<?php
/* POST($key) returns value of $_POST($key) if set,
* otherwise empty string is returned. */
function POST( $key ) {
if ( isset( $_POST[$key] )) return $_POST[$key];
else return '';
}
if ( isset( $_POST['checkme'] )) {
// Checkme is checked, do something with form data:
mySql_insert_formdata( $_POST );
$_POST['error'] = 'Form processed, thanks for your data';
} elseif ( isset($_POST['submitted'])) {
// Form submitted but checkme not checked, set error message
$_POST['error'] = 'Checkme must be cheked first!';
}
echo POST('error');
?>
<form action="forms.php" method="post">
<!-- Hidden field to check at server if form is submitted -->
<input type="hidden" name="submitted" value="anything" />
<!-- Some fields for user to fill, POST() inserts previous value if any -->
<label for="email">eMail</label>
<input type="email" id="email" name="email" value="<?php echo POST('email'); ?>" /><br/>
<!-- Checkbox that must be checked -->
<input type="checkbox" id="checkme" name="checkme" />
<label for="checkme">Approve</label><br/>
<!-- And submit button -->
<input type="submit" value="Submit" />
</form>
结合客户端和服务器端解决方案:
Javascript(客户端)解决方案不能保证做任何事情,它取决于浏览器设置和 javascript 支持。
PHP(服务器端)解决方案保证可以正常工作,客户端/浏览器无法更改这一点。
但是,我认为同时拥有它们很好,因此只要支持 Javascript,客户端就会立即收到有关问题的通知,而不必等待服务器处理。
当用户没有 JS 支持时,他必须等待服务器检查表单并使用数据或返回"try again"
错误。