基于JavaWeb JS的表单校验

最新推荐文章于 2022-11-22 18:43:49 发布

913y

最新推荐文章于 2022-11-22 18:43:49 发布

阅读量293

点赞数 1

分类专栏： JavaWeb程序设计 Javascript 文章标签： javascript javaweb

本文链接：https://blog.csdn.net/Rlynn/article/details/115830045

版权

JavaWeb程序设计同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

Javascript

9 篇文章 0 订阅

订阅专栏

要求

1、姓名验证:

1）、不能为空
2）、长度为6-12位

2、验证密码:

1）、不能为空
2）、长度为6-12位
3）、不能包含用户名

3、年龄:

必须选择 “年轻人”

4、爱好：

必须选择一项

5、来自：

必须选择一项

满足以上条件：

提交表单

否则：

说明原因
不能提交表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基于JavaWeb JS的表单校验</title>
	</head>
	<body>
		<form id="form" name="myForm">
			姓名：<input type="text" id="uname" name="uname"/><br />
			密码：<input type="password" id="upwd" name="upwd"/><br />
			年龄：<input type="radio" name="uage" value="0" checked="checked"/>小朋友
				<input type="radio" name="uage" value="1" />年轻人<br />
			爱好：<input type="checkbox" name="ufav" value="画画"/>画画
				<input type="checkbox" name="ufav" value="唱歌"/>唱歌
				<input type="checkbox" name="ufav" value="跳舞"/>跳舞<br />
			来自：<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择</option>
					<option value="beijing" >北京</option>
					<option value="shanghai" >上海</option>
					<option value="guangzhou" >广州</option>
				</select><br>
			<div id="validate" style="color:red;"></div>
			<button type="button" onclick="checkForm();"> 提交</button>
			<button type="reset" onclick="resetForm();">重置</button>
		</form>
	</body>

	<script type="text/javascript">
		
		//通过id参数，返回dom对象
		function $(id){
			return document.getElementById(id);
		}
		//判断字符串是否为空
		function isEmpty(str){
			if(str == null || str.trim() == ""){
				return true;
			}
			return false;
		}
		function checkForm(){
			//验证用户名
			var uname=$("uname").value;
			if(isEmpty(uname)){
				//通过innerHTML赋值
				$("validate").innerHTML = "用户名不能为空！";
				return ;
			}
			if(uname.length < 6 || uname.length > 12){
				$("validate").innerHTML = "用户名长度需为6-12位之间！";
				return ;
			}
			
			//验证密码
			var upwd=$("upwd").value;
			if(isEmpty(upwd)){
				$("validate").innerHTML = "密码不能为空！";
				return ;
			}
			if(upwd.length < 6 || upwd.length > 12){
				$("validate").innerHTML = "密码长度需为6-12位之间！";
				return ;
			}
			if(upwd.indexOf(uname) > 0){	//upwd.indexOf(uname) > 0说明有包含
				$("validate").innerHTML = "密码不能包含用户名！";
				return ;
			}
			
			//验证年龄
			var uage=document.getElementsByName("uage");
			//获取第二个单选框是否被选中
			var cked=uage[1].checked;
			if(!cked){
				$("validate").innerHTML = "年龄必须选择“年轻人”！";
				return ;
			}
			
			//验证爱好
			var ufavs=document.getElementsByName("ufav");
			if(isEmpty(favs)){
				$("validate").innerHTML = "必须选择一项爱好！";
				return ;
			}
			
			//验证下拉框
			var city=$("ufrom").value;
			if(city == -1){
				$("validate").innerHTML = "请选择您的城市！";
				return ;
			}
			
			//设置表单提交的地址
			$("form").action=" ";//填写地址
			//提交表单
			$("form").submit();
		}		
	</script>
</html>

913y

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
基于JavaWeb JS的表单校验

要求1、姓名验证:1）、不能为空2）、长度为6-12位2、验证密码:1）、不能为空2）、长度为6-12位3）、不能包含用户名3、年龄:必须选择 “年轻人”4、爱好：必须选择一项5、来自：必须选择一项满足以上条件：提交表单否则：说明原因不能提交表单<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>基于Ja
复制链接

扫一扫