• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2018-11-09 17:38:42原创2039
    本篇文章给大家带来的内容是介绍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('成功!');">
    
    			<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中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:css+js实现垂直旋转切换的幻灯片动画效果(附代码) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • js点击文本框弹出可选择的checkbox复选框_javascript技巧• jquery对复选框(checkbox)的操作汇总• javascript判断复选框是否选中的方法_javascript技巧• Labelauty–jQuery单选框/复选框美化插件分享_jquery
    1/1

    PHP中文网