jQuery验证表单

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="xc"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<style type="text/css">
.dis {
	display:display;
}
 .aa {
	display: none;
} 
</style>
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
<script type="text/javascript" >
var flag1=false;
var flag2=false;
var flag3=false;
var flag4=false;
function isusername() {
	var username=document.getElementsByName("userName").item(0).value;
	location.href="panduanUserServlet?username="+username+"";
}  
function isUser(flag) {
	
	if(flag==true){
		return false;
	}
	if(flag==false){
	//	alert(flag);
	   flag1=true;
		return true;}
}
//使用jquery判断
$(document).ready(function(e) {
	
    $(":password:eq(0)").blur(function(){
		var len= $(":password:eq(0)").val().length;
		//alert(len);
		if(len<6){
			$("#a1").text("请输入6位以上密码!");	
			return false;
		}else{
			$("#a1").text("");
			flag2=true;
			return true;
		}
	});
	  $(":password:eq(1)").blur(function(){
		 var pwd1= $(":password:eq(0)").val();
	    var pwd2=$(":password:eq(1)").val();
		if(pwd1==pwd2){
			$("#a2").text("");
			flag3=true;
			return true;
		}else{
			$("#a2").text("两次密码输入不一致！");
			return false;
		}
	  });
	  
	  $("#email").blur(function(){
		 
	  var emails= $("#email").val();
	 //  alert(emails);
	  var mg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;	
			if (!mg.test(emails)) {
				$("#a3").text("邮箱格式错误");
			} else {
				$("#a3").text("");
				flag4=true;
			}
	  });
	  
	  $("form").submit(function(){
		 // alert("bbb");
		  if(flag1==false||flag2==false||flag3==false||flag4==false){
			  alert("无法提交，请正确输入");
			  return false;
		  }else{
			  return true;
		  }
	  });
	  
	
});



//使用js进行判断

/* 	function ispwd() {
		var pwd1 = document.getElementsByName("passWord").item(0).value;
		if (pwd1.length< 6) {
			var div1 = document.getElementById("abc1");
			div1.className= "dis";
			return false;
		} else {
			var div1 = document.getElementById("abc1");
			div1.className = "aa";
			return true;
		}
	}
	function ispwd2() {
		var pwd1 = document.getElementsByName("passWord").item(0).value;
		var pwd2 = document.getElementsByName("rePassWord").item(0).value;
		//alert(pwd2);
		if(pwd1==pwd2){
			return true;
		}else {
			return false;
		}
	}
	function isEmail() {
		var emailvalue = document.getElementsByName("email").item(0).value;
		//alert(eamilvalue);
		  var index1=emailvalue.indexOf('@');
		    var index2=emailvalue.indexOf('.');
			if(index1==-1||index2==-1){
				//alert("邮箱缺少@");
				return false;
			}else {
				return true;
			}	
		
	}
	function isUser(flag) {
	
		if(flag==true){
			return false;
		}
		if(flag==false){
		//	alert(flag);
			return true;}
	}
	
	function isAll() {
		if(ispwd()==false||ispwd2()==false||isEmail()==false|| isUser(flag)==false){
			alert("无法提交，请正确输入");
			return false;
		}else{
			return true;
		}
	} */
</script>
</head>
<body>
	<%
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String user="";
		String flag = "";
		if (request.getAttribute("flag") != null) {
			flag = (String) request.getAttribute("flag");
		}
		if(request.getAttribute("username")!=null){
			user=(String) request.getAttribute("username");
		}
		System.out.print(flag);
	%>
	<div id="header" class="wrap">
		<div id="logo">网上书城</div>
		<div id="navbar">
			<form method="get" name="search" action="">
				搜索：<input class="input-text" type="text" name="keywords" /><input
					class="input-btn" type="submit" name="submit" value="" />
			</form>
		</div>
	</div>
	<div id="register">
		<div class="title">
			<h2>欢迎注册网上书城</h2>
		</div>
		<div class="steps">
			<ul class="clearfix">
				<li class="current">1.填写注册信息</li>
				<li class="unpass">2.注册成功</li>
			</ul>
		</div>
		<form method="post" action="registerServlet">
			<dl  >
				<dt>用 户 名：</dt>
				<dd>
				<input  class="input-text" type="text" name="userName" value="<%=user %>" onblur="isusername()"/>
				<c:if test="${flag=='true' }">
					<span >用户名已存在</span>
					</c:if>
				</dd>
				<dt>密　　码：</dt>
			<dd><input class="input-text" type="password" name="passWord" /><span id="a1" ></span></dd>
			<dt>确认密码：</dt>
			<dd><input class="input-text" type="password" name="rePassWord" /><span id="a2"></span></dd>
			<dt>Email地址：</dt>
			<dd><input id="email" class="input-text" type="text" name="email" /><span id="a3"></span></dd>
			<dt></dt>
			<dd class="button">
					<input class="input-reg" type="submit" name="register" onclick="isUser(flag=<%=flag%>)" value="" />
				</dd>

			</dl>
		</form>
	</div>
	<div id="footer" class="wrap">网上书城 &copy; 版权所有</div>
</body>
</html>
猜你喜欢
