首頁  >  文章  >  web前端  >  JavaScript如何實作表單的複選框驗證

JavaScript如何實作表單的複選框驗證

青灯夜游
青灯夜游原創
2018-11-09 17:38:223542瀏覽

本篇文章帶給大家的內容是介紹js如何實作表單的複選框驗證,在表單提交時,判斷複選框是否選擇。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

js實作表單的複選框驗證

在網站,當我們進行一些表單提交,如註冊等,底部都會有要求人們「接受條款和條件”或類似的內容。基本上是如果不同意(不選擇),就無法提交表單。

那麼要如何實現這樣的功能?

其實很簡單,使用JavaScript 的vanilla,我們就可以阻止表單提交,如下圖:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实现表单的复选框验证</title>
		<script type="text/javascript">
			function checkForm(form) {
				if(!form.terms.checked) {
					alert("请注明接受条款和条件。");
					form.terms.focus();
					return false;
				}
				return true;
			}
		</script>
	</head>

	<body>

		<form id="example1" method="POST" action="" onsubmit="return checkForm(this) && alert(&#39;成功!&#39;);">

			<p><input id="field_terms" type="checkbox" name="terms">
				<label for="field_terms">我接受 <u>条款和条件</u></label></p>
			<span><input type="submit"></span>

		</form>

	</body>

</html>

效果圖:

JavaScript如何實作表單的複選框驗證

大功告成,大家可以自己試試看!

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

以上是JavaScript如何實作表單的複選框驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn