jQuery验证表单

今天药忘吃喽~ 2022-05-10 14:58 227阅读 0赞

<%@ 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">网上书城 © 版权所有</div>
    </body>
    </html>

![70][]

[70]: /images/20220505/26be08fa55e24f8aaeb90d3f0bb12cd1.png