jQuery驗證表單
阿新 • • 發佈：2018-12-21
<%@ 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][email protected]([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>
