JavaScript使用表单元素验证表单

最新推荐文章于 2024-01-31 19:39:23 发布

置顶 Coder19960227

最新推荐文章于 2024-01-31 19:39:23 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签：表单验证

本文链接：https://blog.csdn.net/qq_35978855/article/details/99744386

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一章:使用JavaScript验证表单

JavaScript的主要作用:验证表单

需要的知识点:

JavaScript正则表达式
表单元素事件

1最简单的表单验证-禁止空白的必填项目

1.1最简单的HTML结构

网站最基础的就是注册,它是一个系统的交互基础.

例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单列表的html结构</title>
	</head>
	<body>
		<form method="post" action="">
			账户:<input type="text" name=""/><br/><br/>
			密码:<input type="password" name=""/><br/><br/>
			确认:<input type="password" name=""/><br/><br/>
			<input type="submit"  value="注册" />
		</form>
	</body>
</html>

1.2绑定验证功能

因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()

例子:

注册事件

<!DOCTYPE html>
<html>
	<!--绑定验证功能，注册事件-->
	<head>
		<meta charset="utf-8">
		<title>简单列表的html结构</title>
	</head>
	<body>
		<form method="post" action="">
			账户:<input type="text" name=""/><br/><br/>
			密码:<input type="password" name=""/><br/><br/>
			确认:<input type="password" name=""/><br/><br/>
			<input type="submit"  
			value="注册"
			 onclick="return eg.regCheck();"/>		
		</form>
		<script >
			//声明一个对象,当做命名空间来使用
			var eg =  {};
			eg.regCheck = function(){
				
			}
		</script>
	</body>
</html>

eg.regCheck()函数需要添加的行为,获取用户输入的账户信息,给input标签加上一个id属性,JavaScript再通过这个指定的id去取得相应的信息,然后返回验证结果true或false

例子:

给表单添加验证功能

<!DOCTYPE html>
<html>
	<!--给表单添加验证功能-->
	<head>
		<meta charset="utf-8">
		<title>简单列表的html结构</title>
	</head>
	<body>
		<form method="post" action="">
			账户:<input type="text" name="" id="userid"/><br/><br/>
			密码:<input type="password" name="" id="userpwd"/><br/><br/>
			确认:<input type="password" name="" id="userpwd2"/><br/><br/>
			<input type="submit"  
			value="注册"
			onclick="return eg.regCheck();"/>
		</form>
		<script >
			//声明一个对象,当做命名空间来使用
			//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
			var eg =  {};
			eg.$ = function(id){
				return document.getElementById(id);
				};
				eg.regCheck = function(){
				    var uid = eg.$("userid");
				    var upwd = eg.$("userpwd");
				    var upwd2 = eg.$("userpwd2");	
				if(uid.value == ''){
					alert('账户不能为空!');
					//返回false就会阻止表单form提交
					return false;
				}
				if(upwd.value == ''){
					alert('密码不能为空!');
					//返回false就会阻止表单form提交
					return false;
				}
				if(upwd.value != upwd2.value){
					alert('两次输入密码不相同!');
					//返回false就会阻止表单form提交
					return false;
				}
				return true;
			};
		</script>
	</body>
</html>

1.3绑定验证的另一种方式

把验证放在"注册"按钮的onclick事件属性里使用,还有另一种调用方式,即form标签的onsubmit事件属性

例子:

form表单绑定验证完整范例

<!DOCTYPE html>
<html>
<!--
绑定验证的另一种方式,form表单绑定验证完整示例
-->
	<head>
		<meta charset="utf-8">
		<title>简单列表的html结构</title>
	</head>
	<body>
		<form method="post" action="" onsubmit="return eg.regCheck();">
			账户:<input type="text" name="" id="userid"/><br/><br/>
			密码:<input type="password" name="" id="userpwd"/><br/><br/>
			确认:<input type="password" name="" id="userpwd2"/><br/><br/>
			<input type="submit"  
			value="注册"
			 />
		</form>
		<script>
			//声明一个对象,当做命名空间来使用
			//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
			var eg =  {};
			eg.$ = function(id){
				return document.getElementById(id);
				};
			eg.regCheck = function () {
				var uid = eg.$("userid");
				var upwd = eg.$("userpwd");
				var upwd2 = eg.$("userpwd2");
				if(uid.value == ''){
					alert('账户不能为空!');
					//返回false就会阻止表单form提交
					return false;
				}
				if(upwd.value == ''){
					alert('密码不能为空!');
					//返回false就会阻止表单form提交
					return false;
				}
				if(upwd.value != upwd2.value){
					alert('两次输入密码不相同!');
					//返回false就会阻止表单form提交
					return false;
				}
				return true;

			};
		</script>
	</body>
</html>

2,处理各种类型的表单元素

2.1，input,textarea,hidden和button

要求:在注册表单的基础上加"简介"字段，可以为空，但是最长不超过60个字符，同时要统计一下，用户输入错误的次数，输入超过3次，就锁定"注册"按钮,然后要"解锁"才能重新使用

例子:

处理各种类型表单一

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>处理各种类型表单一</title>
	</head>
	<body>
		<form method="post" action="" onsubmit="return eg.regCheck();">
			账户:<input type="text" name="" id="userid"/><br/><br/>
			密码:<input type="password" name="" id="userpwd"/><br/><br/>
			确认:<input type="password" name="" id="userpwd2"/><br/><br/>
			简介:
			    <textarea name="" rows="4" cols="18" id="about">
				</textarea><br/><br/>
			<input type="submit"
			value="注册" id="regBtn"
			 />
			<input type="button" value="解锁" onclick="eg.unlock"
			style="display: none;" id="regUnlock">
		</form>
		<script>
			//声明一个对象,当做命名空间来使用
			//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
			var eg =  {};
			eg.$ = function(id){
				return document.getElementById(id);
				};
			//主要的验证方法
			eg.regCheck = function () {
				var uid = eg.$("userid");
				var upwd = eg.$("userpwd");
				var upwd2 = eg.$("userpwd2");
				//value是元素自带属性
				if(uid.value == ''){
					alert('账户不能为空!');
					eg.err();
					return false;
				}
				if(upwd.value == ''){
					alert('密码不能为空!');
					eg.err();
					return false;
				}
				if(upwd.value != upwd2.value){
					alert('两次输入密码不相同!');
					eg.err();
					return false;
				}
				//新增部分
				var about = eg.$("about");
				//value是字符串类型的属性
				if (about.value.length>60){
					alert("简介太长!");
					eg.err();
					return false;

				}
				//返回true就会提交表单
				return true;

			};
			//出错时记录错误次数
			eg.err = function () {
				var el = eg.$("errnum");
				var old = el.value;
				//把字符串转换为整数+1,并保存起来
				el.value = parseInt(old)+1;
				//用来检查是否应该锁定
				eg.lock();
			};
			//通过次数判断是否要锁定
			eg.lock = function(){
				var err = eg.$("errnum");
				if (parseInt(err.value)>2){
					eg.$("regBtn").disabled = true;
					//根据业务需求,输错3次就锁定
					eg.$("regUnlock").style.display="block";
					//同时显示解锁按钮
				}
			};
			eg.unlock = function(){
				eg.$("regBtn").disabled = false;
				//根据业务需求，解锁就是让用户可以重新注册
				eg.$("regUnlock").style.display="none";
				//元素所有样式都挂载到style属性下
			}
		</script>
	</body>
</html>

现在制作一个错误统计,可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到，可以选择input的type属性是hidden的元素来存储

2.2checkbox,radio和select

知道用户性别,年龄,兴趣爱好

例子:

处理各种类型表单二

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>处理各种类型表单二</title>
	</head>
	<body>
		<form method="post" action="" onsubmit="return eg.regCheck();">

			账户:<input type="text" name="" id="userid"/><br/><br/>
			密码:<input type="password" name="" id="userpwd"/><br/><br/>
			确认:<input type="password" name="" id="userpwd2"/><br/><br/>
			简介:
			    <textarea name="" rows="4" cols="18" id="about">
				</textarea><br/><br/>
			<input type="submit"
			value="注册" id="regBtn"
			 />
			<input type="button" value="解锁" onclick="eg.unlock"
			style="display: none;" id="regUnlock">
		</form>
		<script>
			//声明一个对象,当做命名空间来使用
			//定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率
			var eg =  {};
			eg.$ = function(id){
				return document.getElementById(id);
				};
			//主要的验证方法
			eg.regCheck = function () {
				var uid = eg.$("userid");
				var upwd = eg.$("userpwd");
				var upwd2 = eg.$("userpwd2");
				//value是元素自带属性
				if(uid.value == ''){
					alert('账户不能为空!');
					eg.err();
					return false;
				}
				if(upwd.value == ''){
					alert('密码不能为空!');
					eg.err();
					return false;
				}
				if(upwd.value != upwd2.value){
					alert('两次输入密码不相同!');
					eg.err();
					return false;
				}
				//新增部分
				var about = eg.$("about");
				//value是字符串类型的属性
				if (about.value.length>60){
					alert("简介太长!");
					eg.err();
					return false;

				}
				//返回true就会提交表单
				return true;

			};
			//出错时记录错误次数
			eg.err = function () {
				var el = eg.$("errnum");
				var old = el.value;
				//把字符串转换为整数+1,并保存起来
				el.value = parseInt(old)+1;
				//用来检查是否应该锁定
				eg.lock();
			};
			//通过次数判断是否要锁定
			eg.lock = function(){
				var err = eg.$("errnum");
				if (parseInt(err.value)>2){
					eg.$("regBtn").disabled = true;
					//根据业务需求,输错3次就锁定
					eg.$("regUnlock").style.display="block";
					//同时显示解锁按钮
				}
			};
			eg.unlock = function(){
				eg.$("regBtn").disabled = false;
				//根据业务需求，解锁就是让用户可以重新注册
				eg.$("regUnlock").style.display="none";
				//元素所有样式都挂载到style属性下
			}
		</script>
	</body>
</html>

Coder19960227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript使用表单元素验证表单

                     第一章:使用JavaScript验证表单JavaScript的主要作用:验证表单需要的知识点:JavaScript正则表达式表单元素事件1最简单的表单验证-禁止空白的必填项目1.1最简单的HTML结构网站最基础的就是注册,它是一个...
复制链接

扫一扫

专栏目录