Js表单验证

S宋憨憨

于 2022-04-12 21:44:16 发布

阅读量46

点赞数

文章标签： java

本文链接：https://blog.csdn.net/S2662015043/article/details/124135133

版权

为什么需要表单验证

减轻服务器的压力
保证输入的数据符合要求![在这里插入图片描述](

在这里插入图片描述

表单验证的内容

日期是否有效或日期格式是否正确
表单元素是否为空
用户名和密码
E-mail地址是否正确
身份证号码等是否是数字

表单验证案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="注册成功.html" method="post" onsubmit="return checkAll()">
             <label>
	         <div id="">
				账号：<input type="text" id="name" onkeyup="checkname()"/>
				<span id="sname" style="color: red;"></span>
			</div>
			</label>			
			<label>
				<div id="">
				密码：<input type="password" id ="pwd"onkeyup="checkpwd()"/>	
				<span id="spwd" style="color: red;"></span>
				</div>
			</label>
			
			<label>
				<div id="">
					邮箱：<input type="email"  id="yx" />
				</div>
			</label>
			<button type="submit">注册</button>
			<button type="reset">重置</button>
		</form>
	</body>
	<script type="text/javascript">
		function $ (id){
			return document.getElementById(id);
		}
		function checkname (){
			var reg = /^\w{6,10}$/
		    var name = $("name").value;
	       if (""==name) {
	       	$("sname").innerHTML="账号不能为空！";
			return false;
	       }else{
			   if (!reg.test(name)) {
			   	$("sname").innerHTML="账号只能由6-10位数字、字母、下滑线组成！";
				return false;
			   }else{
				   $("sname").innerHTML="";
				  return true;
			   }
		   }
		}
		function checkpwd (){
			var reg = /^\d{6}$/
		    var pwd = $("pwd").value;
		   if (""==pwd) {
		   	$("spwd").innerHTML="密码不能为空！";
			return false;
		   }else{
			   if (!reg.test(pwd)) {
			   	$("spwd").innerHTML="密码只能由6位数字组成！";
				return false;
			   }else{
				   	$("spwd").innerHTML="";
				  return true;
			   }
		   }
		}
		
		function checkAll(){
			if (!checkname()|| !checkpwd()) {
				return false;
			} else{
				return true;
			}
		}
	</script>
</html>

S宋憨憨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js表单验证

为什么需要表单验证减轻服务器的压力保证输入的数据符合要求![在这里插入图片描述](表单验证的内容日期是否有效或日期格式是否正确表单元素是否为空用户名和密码E-mail地址是否正确身份证号码等是否是数字表单验证案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body&gt
复制链接

扫一扫