js设置必填项不能为空实例

原创已于 2023-01-14 14:02:50 修改 · 7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

于 2019-02-15 11:29:06 首次发布

本文介绍了一个使用JavaScript进行表单验证的简单示例，确保所有必填字段都已填写，为前端开发人员提供了一种有效的方法来增强用户体验。

<!-- 实例一： -->
<form  method="post" action="act.php" onsubmit="return check()">
	<input type="text" name="xm2" id="xm2">
	<input type="text" name="xm3" id="xm3">
	<input type="text" name="xm4" id="xm4">
	<input type="text" name="xm5" id="xm5">
	<input type="text" name="xm6" id="xm6">
	<input type="submit" value="提交">
</form>
<script type="text/javascript">
	function check(){
		var xm2 = document.getElementById("xm2").value;
		var xm3 = document.getElementById("xm3").value;
		var xm4 = document.getElementById("xm4").value;
		var xm5 = document.getElementById("xm5").value;
		var xm6 = document.getElementById("xm6").value;
		if(xm2 == '' || xm3 == '' ||  xm4 == '' ||  xm5 == '' || xm6 == ''){
			alert("必填项不能为空");
			return false;
		}
		return true;
	}
</script>


<!-- 实例二： -->
<form  method="post" action="act.php" onsubmit="return check()">
	<input type="text" name="xm7" id="xm7">
	<input type="text" name="xm10" id="xm10">
	<input type="text" name="xm11" id="xm11">
	<input type="submit" value="提交">
</form>
<script type="text/javascript">
	function check(){
		var xm7 = document.getElementById("xm7").value;
		var xm10 = document.getElementById("xm10").value;
		var xm11 = document.getElementById("xm11").value;
		if(xm7.length>0){
			if (xm10.length == 0 || xm11.length == 0) {
				alert("必填项不能为空");
				return false;
			}
		}
	}
</script>