首页 > web前端 > js教程 > JavaScript如何实现表单的复选框验证

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

青灯夜游
发布: 2018-11-09 17:38:42
原创
3566 人浏览过

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

大功告成,大家可以自己动手试试!

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

以上是JavaScript如何实现表单的复选框验证的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板