cari

Rumah >hujung hadapan web >tutorial js >JavaScript如何实现表单的复选框验证

JavaScript如何实现表单的复选框验证

青灯夜游
青灯夜游asal
2018-11-09 17:38:223581semak imbas

本篇文章给大家带来的内容是介绍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) &amp;&amp; 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>

效果图：

1.gif

大功告成，大家可以自己动手试试！

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

Atas ialah kandungan terperinci JavaScript如何实现表单的复选框验证. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css+js实现垂直旋转切换的幻灯片动画效果（附代码）Artikel seterusnya：JavaScript编程中会出现的错误类型有哪些？错误类型介绍

Artikel berkaitan

Lihat lagi