JavaScript表单校验

最新推荐文章于 2024-07-04 19:38:04 发布

Bless___

最新推荐文章于 2024-07-04 19:38:04 发布

阅读量89

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/S_Tian/article/details/103272543

版权

<body>	
	<form onsubmit = "return loop()">
		<input id="user_name" placeholder="请输入用户名"/>
		<input id="password" type="password" placeholder="请输入密码"/>
		<br/>
		<input type="radio" name="sex" value="1"/>男
		<input type="radio" name="sex" value="2"/>女
		<br/>
		<input type="checkbox" name="hobby" value="1"/>篮球
		<input type="checkbox" name="hobby" value="2"/>足球
		<input type="checkbox" name="hobby" value="3"/>羽毛球
		<br/>
		<select id="grade">
			<option value="">请选择</option>
			<option value="1">一年级</option>
			<option value="2">二年级</option>
		</select>
		<input type="submit" value="提交"/>
	</form>
	<script>
		function loop(){
			//先校验用户名
			var element=document.getElementById("user_name");
			var userName=element.value;
			if(userName == ""){
				alert("请输入用户名");
				return false;
			}

			//校验密码
			element = document.getElementById("password");
			var password = element.value;
			if(password == ""){
				alert("请输入密码");
				return false;
			}
			//校验单选框
			var elements = document.getElementsByName("sex");
			var flag = false;
			for(var i = 0;i<elements.length;i++){
				element = elements[i];
				if(element.checked){
					flag = true;
					break;
				}
			}
			if(!flag){
				alert("请选择性别");
				return false;
			}
	
			//校验复选框
			elements = document.getElementsByName("hobby");
			var count = 0;
			for(var i =0;i<elements.length;i++){
				element = elements[i];
				if(element.checked){
					count++;
				}
			}
			if(count<2){//这里我们要求复选框至少选择两个选项
				alert("请至少选择两项爱好");
				return false;
			}

			//校验下拉列表
			flag = false;
			element = document.getElementById("grade");
			var options = element.options;
			for(var i=0;i<options.length;i++){
				var option = options[i];
				if(option.selected && option.value != ""){
					flag = true;
				}
			}
			if(!flag){
				alert("请选择年级");
				return false;
			}
			return true;
		}
	</script>
</body>