案例：使用JS完成表单的静态验证

最新推荐文章于 2021-10-01 21:41:19 发布

原创最新推荐文章于 2021-10-01 21:41:19 发布 · 663 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

17 篇文章

订阅专栏

该博客主要围绕输入框操作展开分析。先确定 onfocus 聚焦事件并绑定函数，在输入框后显示提示信息；接着确定 onblur 离焦事件并绑定函数；最后获取用户输入内容进行数据校验，并给出相应提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分析第一步：确定事件 onfocus 聚焦事件并为其绑定一个函数
第二步：编写函数(在输入框的后面显示提示信息)
第三步：确定事件 onblur 离焦事件并为其绑定一个函数
第四步：获取用户输入内容，对数据进行校验，分别给出提示。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<!--
        	作者：offline
        	时间：2019-05-16
        	描述： 第一步：确定事件 onfocus 聚焦事件  并为其绑定一个函数 
        	            第二步：编写函数(在输入框的后面显示提示信息)
        	            第三步： 确定事件 onblur 离焦事件 并为其绑定一个函数
        	            第四步：获取用户输入内容，对数据进行校验，分别给出提示。
        -->
	
		
		<!--<script>
			//方式一：逐个校验
			function checkForm() {
				//	 alert("aaa");
				//校验用户名
				//1.获取用户输入的数据
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if (uValue == "") {
					alert("用户名不能为空。")
					return false;
				}
				//校验密码信息
				var pValue = document.getElementById("password").value;
				
				if (pValue == "") {
					alert("密码不能为空")
					return false;
				}
				var rpValue=document.getElementById("repassword").value;
				if(rpValue==""){
					alert("第二次输入的密码为空，请重新输入");
					return false;
				}else if (pValue !=rpValue) {
					
					alert("两次密码输入不一致，请重新输入");
					return false;
				}
				
				//校验邮箱
				var eValue=document.getElementById("eamil").value;
				
				if (eValue=="") {
					alert("邮箱不能为空，请重新输入");
					
				} else if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
				 alert("邮箱格式不正确，请检查后输入");	
				}
				
			}
		</script>-->
		
		
	    <!--
        	作者：offline
        	时间：2019-05-16
        	描述：单个输入框的验证
        -->
	<!--	<script>
	       //方式二：单个验证
			function showTips(){
				document.getElementById("userspan").innerHTML="<font color='darkgray'>填入用户名!</font>";
				
			}
			
			function checkUser(){
		var user=document.getElementById("user").value;
			if (user=="") {
				document.getElementById("userspan").innerHTML="<font color='#FF0000'>用户名不能为空！</font>";
			} else{
				document.getElementById("userspan").innerHTML="";
			}	 
				
			}
			
		</script>-->
		
		<!--
        	作者：offline
        	时间：2019-05-16
        	描述：批量的输入框的验证
        	通过上面的代码将 表格id和提示信息通过参数传递到方法中
        -->
         <script>
      	//方式三:批量传参验证
        	function showTips(id,	){
				document.getElementById(id+"span").innerHTML="<font color='darkgray'>"+info +"</font>";
			 return false;
			}
			
			function check(id,info){
		var user=document.getElementById(id).value;
			if (user=="") {
				document.getElementById(id+"span").innerHTML="<font color='#FF0000'>"+info+"</font>";
				return false;
			} else{
				document.getElementById(id+"span").innerHTML="";
				return false;
			}	 
			
				
			}
        	
        </script>
	</head>

	<body>
		<table border="1px" align="center" width="1300px" cellpadding="0px"  cellspacing="0px">
			<!--1.logo部分-->
			<tr>
				<td>
					<!--嵌套一个一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--2.导航栏部分-->
			<tr height="50px">
				<td bgcolor="black">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font size="5" color="white">首页</font>
					</a> &nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">手机数码</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">电脑办公</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">鞋靴箱包</font>
					</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">
						<font color="white">家用电器</font>
					</a>
				</td>
			</tr>
			<!--3.注册表单-->
			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<!--嵌套一个十行二列的表格-->
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER
								</td>
							</tr>
							<tr>
								<td>
									用户名
								</td>
								<td>
									<input type="text" name="user"  size="34px" id="user"  onfocus="showTips('user','请输入用户名')" onblur="check('user','用户名不能为空')" /><font color="#FF0000">*</font> <span id="userspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									密码
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','请输入密码')"  onblur="check('password','密码不能为空')"/><font color="#FF0000">*</font><span id="passwordspan"></span>
								</td>
							</tr>
							<tr>
								<td>
									确认密码
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil" />
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px" />
								</td>
							</tr>
							<tr>
								<td>
									性别
								</td>
								<td>
									<input type="radio" name="sex" value="男" />男
									<input type="radio" name="sex" value="女" />女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px" />
								</td>
							</tr>
							<tr>
								<td>
									验证码
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="注册" />
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<!--4.广告图片-->
			<tr>
				<td>
					<img src="../img/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--5.友情链接和版权信息-->
			<tr>
				<td align="center">
					<a href="#">关于我们</a>
					<a href="#">联系我们</a>
					<a href="#">招贤纳士</a>
					<a href="#">法律声明</a>
					<a href="#">友情链接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服务声明</a>
					<a href="#">广告声明</a>
					<p>
						Copyright © 2005-2016 传智商城 版权所有
					</p>
				</td>
			</tr>
		</table>
	</body>

</html>