（贰）JS页面校验

最新推荐文章于 2023-11-21 20:28:25 发布

Cherry_King

最新推荐文章于 2023-11-21 20:28:25 发布

阅读量175

点赞数

分类专栏： JS&JQuery 文章标签： js用户名校验 JS邮箱校验

本文链接：https://blog.csdn.net/Cherry_King/article/details/99475080

版权

JS&JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.用户名长度校验

index.jsp如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script>
		function checkForm(){
			var input1=document.getElementById("username");
			var uValue=input1.value;
			if (uValue.length>=6){
				return true;
			}
			else {
				alert("用户名太短了！！");
			}	
				return false;
		}
	</script>
</head>
<body>
	<form action="success.jsp" onsubmit="return checkForm()">
			用户名：<input type="text" id="username"/><br>
			<input type="submit" value="提交"/>
	</form>
</body>
</html>

success.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>成功跳转！！！！！</h1>
</body>
</html>

范围效果：

填入：12345，点击提交：
填入123456，点击提交：

2.邮箱校验（正则表达式）

同样的写index.jsp和success.jsp两个文件，success.jsp不变，index.jsp如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script>
		function checkForm(){
			var input1=document.getElementById("username");
			var uValue=input1.value;
			if (uValue.length>=6){
				
			}
			else {
				alert("用户名太短了！！");
				return false;
			}
			var email= document.getElementById("email");
			var uEmail= email.value;
			if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(uEmail)){
				alert("校验成功！");
			}
			else{
				alert("邮箱不合法！！");
				return false;
			}
			return true;
		}
	</script>
</head>
<body>
	<form action="success.jsp" onsubmit="return checkForm()">
			用户名：<input type="text" id="username"/><br>
			密码：<input type="password" id="password"/><br>
			邮箱：<input type="text" id="email"/><br>
			<input type="submit" value="提交"/>
	</form>
</body>
</html>

访问效果如下：
用户名输入：123456，密码随便。邮箱输入：123（不合规则），则：
输入正确的邮箱：1234@qq.com.cn
校验成功，进而跳转到成功页面。

Cherry_King

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（贰）JS页面校验

1.用户名长度校验index.jsp如下：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www....
复制链接

扫一扫

专栏目录