java Jquery表单校验代码jsp页面

最新推荐文章于 2023-03-05 17:04:39 发布

weixin_33994444

最新推荐文章于 2023-03-05 17:04:39 发布

阅读量137

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/springcloud/p/8561938.html

版权

jsp.file


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<title>欢迎注册EasyMall</title>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="${app}/css/regist.css"/>
		
		<script type="text/javascript" src="${app}/js/jquery-1.4.2.js"></script>
		<script type="text/javascript">
			/* 注册表单的js校验 */
			var formObj = {
				/* 检查输入项是否为空 */
				"checkNull" : function(name, msg){
					var value = $("input[name='"+name+"']").val().trim();
					
					//清空之前的提示消息
					formObj.setMsg(name, "");
					
					if(value == ""){
						formObj.setMsg(name, msg);
						return false;
					}
					return true;
				},
				/* 设置错误提示消息 */
				"setMsg" : function(name, msg){
					$("#"+name+"_msg").html(msg);
					$("#"+name+"_msg").css("color", "red");
				}
				,
				/* 注册表单js校验  */
				"checkForm" : function(){
					//1.非空校验
					var res1 = formObj.checkNull("username", "用户名不能为空");
					var res2 = formObj.checkNull("password", "密码不能为空");
					var res3 = formObj.checkNull("password2", "确认密码不能为空");
					var res4 = formObj.checkNull("nickname", "昵称不能为空");
					var res5 = formObj.checkNull("email", "邮箱不能为空");
					var res6 = formObj.checkNull("valistr", "验证码不能为空");
					
					//2.两次密码是否一致
					var res7 = formObj.checkPassword("password", "两次密码不一致");
					
					//3.邮箱格式是否正确
					var res8 = formObj.checkEmail("email", "邮箱格式不正确");
					
					return res1&&res2&&res3&&res4&&res5&&res6&&res7&&res8;
					
				},
				/* 检查邮箱格式是否正确  */
				"checkEmail" : function(name, msg){
					var email = $("input[name='"+name+"']").val().trim();
					
					if(email == ""){
						formObj.setMsg("email", "邮箱不能为空");
					}
					
					if(email != ""){
						var reg = /^\w+@\w+(\.\w+)+$/;
						if(!reg.test(email)){
							formObj.setMsg(name, msg);
							return false;
						}
					}
					return true;
				}
				,
				/* 检查两次密码是否一致 */
				"checkPassword" : function(name, msg){
					var psw1 = $("input[name='"+name+"']").val().trim();
					var psw2 = $("input[name='"+name+"2']").val().trim();
					
					if(psw2 == ""){
						formObj.setMsg(name+"2", "确认密码不能为空");
					}
					
					if(psw1 != "" && psw2 != ""){
						if(psw1 != psw2){
							formObj.setMsg(name+"2", msg);
							return false;
						}
					}
					return true;
				}
			}
			
			/* 利用ajax实现用户名是否存在的校验 */
			function ajaxCheckeUsername(thisobj){
				//非空校验
				if(!formObj.checkNull("username", "用户名不能为空!")){
					return;
				}
				
				//获取用户名
				var username = thisobj.value;
				
				//使用ajax检查用户名是否存在
				$("#username_msg").load("${app}/servlet/AjaxCheckUsernameServlet", {"username" : username});
			}
		</script>
	</head>
	<body>
		<form οnsubmit="return formObj.checkForm()" action="${app}/servlet/RegistServlet" method="POST">
			<h1>欢迎注册EasyMall</h1>
			<table>
				<tr>
					<td colspan="2" style="color:red;text-align:center">
						${ requestScope.msg }
					</td>
				</tr>
				<tr>
					<td class="tds">用户名：</td>
					<td>
						<input type="text" name="username" 
							οnblur="ajaxCheckeUsername(this)"
							οnfοcus="formObj.setMsg('username', '')" 
							value="${ param.username }"/>
						<span id="username_msg"></span>
					</td>
				</tr>
				<tr>
					<td class="tds">密码：</td>
					<td>
						<input type="password" name="password" 
							οnblur="formObj.checkNull('password', '密码不能为空')"
							οnfοcus="formObj.setMsg('password', '')"  value="${ param.password }"/>
						<span id="password_msg"></span>
					</td>
				</tr>
				<tr>
					<td class="tds">确认密码：</td>
					<td>
						<input type="password" name="password2" 
							οnblur="formObj.checkPassword('password', '两次密码不一致')"
							οnfοcus="formObj.setMsg('password2', '')"  value="${ param.password2 }"/>
						<span id="password2_msg"></span>
					</td>
				</tr>
				<tr>
					<td class="tds">昵称：</td>
					<td>
						<input type="text" name="nickname" 
							οnblur="formObj.checkNull('nickname', '昵称不能为空')"
							οnfοcus="formObj.setMsg('nickname', '')"  value="${ param.nickname }"/>
						<span id="nickname_msg"></span>
					</td>
				</tr>
				<tr>
					<td class="tds">邮箱：</td>
					<td>
						<input type="text" name="email" 
							οnblur="formObj.checkEmail('email', '邮箱格式不正确')"
							οnfοcus="formObj.setMsg('email', '')"  value="${ param.email }"/>
						<span id="email_msg"></span>
					</td>
				</tr>
				<tr>
					<td class="tds">验证码：</td>
					<td>
						<input type="text" name="valistr" 
							οnblur="formObj.checkNull('valistr', '验证码不能为空')"
							οnfοcus="formObj.setMsg('valistr', '')"  value="${ param.valistr }"/>
						<img οnclick="changeImage(this)" src="${app}/servlet/ValiImageServlet" />
						<span id="valistr_msg"></span>
					</td>
					<script>
						function changeImage(thisobj){
							thisobj.src = "${app}/servlet/ValiImageServlet?time="+new Date().getTime();
						}
					</script>
				</tr>
				<tr>
					<td class="sub_td" colspan="2" class="tds">
						<input type="submit" value="注册用户"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

转载于:https://www.cnblogs.com/springcloud/p/8561938.html

weixin_33994444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java Jquery表单校验代码jsp页面

jsp.file<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML><html> <head> <title>欢迎注册EasyMall</title> <meta http-equ...
复制链接

扫一扫