登入頁面表單驗證Demo
阿新 • • 發佈：2019-01-26
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main{width:650px;margin:50px auto;}
.content{padding:10px;}
.inputs{border:solid 1px #a4c8e0;width:150px;height:15px;}
.userWidth{width:110px;}
.content div{float:left;font-size:12px;color:#000;}
dl{clear:both;}
dt,dd{float:left;}
dt{width:130px;text-align:right;font-size:14px;height:30px;line-height:25px;}
dd{font-size:12px;color:#666666;width:180px;}
/*當滑鼠放到文字框時，提示文字的樣式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*當文字框內容不符合要求時，提示文字的樣式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*當文字框內容輸入正確時，提示文字的樣式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
</style>
<script type="text/javascript">
/*通過ID獲取HTML物件的通用方法，使用getEle代替函式名稱*/
function getEle(elementId){
return document.getElementById(elementId);
}
/*當滑鼠放在使用者名稱文字框時，提示文字及樣式*/
function userNameFocus(){
var userNameId=getEle("userNameId");
userNameId.className="import_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br/>2、只能以數字、字母開頭或結尾，且長度為4-18";
}
/*當滑鼠離開使用者名稱文字框時，提示文字及樣式*/
function userNameBlur(){
var userName=getEle("userName");
var userNameId=getEle("userNameId");
var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="使用者名稱不能為空，請輸入使用者名稱";
return false;
}
if(reg.test(userName.value)==false){
userNameId.className="error_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br/>2、只能以數字、字母開頭或結尾，且長度為4-18";
return false;
}
userNameId.className="ok_prompt";
userNameId.innerHTML="使用者名稱輸入正確";
return true;
}
/*當滑鼠放在密碼文字框時，提示文字及樣式*/
function pwdFocus(){
var pwdId=getEle("pwdId");
pwdId.className="import_prompt";
pwdId.innerHTML="密碼長度為6-16";
}
/*當滑鼠離開密碼文字框時，提示文字及樣式*/
function pwdBlur(){
var pwd=getEle("pwd");
var pwdId=getEle("pwdId");
if(pwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼不能為空，請輸入密碼";
return false;
}
if(pwd.value.length<6 || pwd.value.length>16){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼長度為6-16";
return false;
}
pwdId.className="ok_prompt";
pwdId.innerHTML="密碼輸入正確";
return true;
}
/*當滑鼠離開重複密碼文字框時，提示文字及樣式*/
function repwdBlur(){
var repwd=getEle("repwd");
var pwd=getEle("pwd");
var repwdId=getEle("repwdId");
if(repwd.value==""){
repwdId.className="error_prompt";
repwdId.innerHTML="重複密碼不能為空，請重複輸入密碼";
return false;
}
if(repwd.value!=pwd.value){
repwdId.className="error_prompt";
repwdId.innerHTML="兩次輸入的密碼不一致，請重新輸入";
return false;
}
repwdId.className="ok_prompt";
repwdId.innerHTML="兩次密碼輸入正確";
return true;
}
/*當滑鼠放在暱稱文字框時，提示文字及樣式*/
function nickNameFocus(){
var nickNameId=getEle("nickNameId");
nickNameId.className="import_prompt";
nickNameId.innerHTML="1、包含漢字、字母、數字、下劃線以及@!#getEle%&*特殊字元<br/>2、長度為4－20個字元<br/>3、一個漢字佔兩個字元";
}
/*當滑鼠離開暱稱文字框時，提示文字及樣式*/
function nickNameBlur(){
var nickName=getEle("nickName");
var nickNameId=getEle("nickNameId");
var k=0;
var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配暱稱
var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字元
if(nickName.value==""){
nickNameId.className="error_prompt";
nickNameId.innerHTML="暱稱不能為空，請輸入暱稱";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.className="error_prompt";
nickNameId.innerHTML="只能由漢字、字母、數字、下劃線以及@!#getEle%&*特殊字元組成";
return false;
}
var len=nickName.value.replace(chinaReg,"ab").length; //把中文字元轉換為兩個字母，以計算字元長度
if(len<4||len>20){
nickNameId.className="error_prompt";
nickNameId.innerHTML="1、長度為4－20個字元<br/>2、一個漢字佔兩個字元";
return false;
}
nickNameId.className="ok_prompt";
nickNameId.innerHTML="暱稱輸入正確";
return true;
}
/*當滑鼠放在關聯手機號文字框時，提示文字及樣式*/
function telFocus(){
var telId=getEle("telId");
telId.className="import_prompt";
telId.innerHTML="1、手機號碼以13，15，18開頭<br/>2、手機號碼由11位數字組成";
}
/*當滑鼠離開關聯手機號文字框時，提示文字及樣式*/
function telBlur(){
var tel=getEle("tel");
var telId=getEle("telId");
var reg=/^(13|15|18|17|14|19)\d{9}$/;
if(tel.value==""){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼不能為空，請輸入關聯手機號碼";
return false;
}
if(reg.test(tel.value)==false){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼輸入不正確，請重新輸入";
return false;
}
telId.className="ok_prompt";
telId.innerHTML="關聯手機號碼輸入正確";
return true;
}
/*當滑鼠放在保密郵箱文字框時，提示文字及樣式*/
function emailFocus(){
var emailId=getEle("emailId");
emailId.className="import_prompt";
emailId.innerHTML="請輸入您常用的電子郵箱";
}
/*當滑鼠離開保密郵箱文字框時，提示文字及樣式*/
function emailBlur(){
var email=getEle("email");
var emailId=getEle("emailId");
var reg=/^\
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱不能為空，請輸入保密郵箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱格式不正確，請重新輸入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="保密郵箱輸入正確";
return true;
}
/*表單提交時驗證表單內容輸入的有效性*/
function checkForm(){
var flagUserName=userNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
var flagNickName=nickNameBlur();
var flagTel=telBlur();
var flagEmail=emailBlur();
userNameBlur();
pwdBlur();
repwdBlur();
nickNameBlur();
telBlur();
emailBlur();
if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
return true;
}
else{
return false;
}
}
</script>
<title>矽谷商城</title>
</head>
<body>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" onsubmit="return checkForm()">
<dl>
<dt>使用者名稱：</dt>
<dd><input type="text" id="userName" class="inputs" onfocus="userNameFocus()" onblur="userNameBlur()" /> </dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登入密碼：</dt>
<dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重複登入密碼：</dt>
<dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性別：</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>暱稱：</dt>
<dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>關聯手機號：</dt>
<dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密郵箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="validate/img.png"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</div>
</body>
</html>
pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body,dl,dt,dd,div,form {padding:0;margin:0;}
#header,#main{width:650px;margin:50px auto;}
.content{padding:10px;}
.inputs{border:solid 1px #a4c8e0;width:150px;height:15px;}
.userWidth{width:110px;}
.content div{float:left;font-size:12px;color:#000;}
dl{clear:both;}
dt,dd{float:left;}
dt{width:130px;text-align:right;font-size:14px;height:30px;line-height:25px;}
dd{font-size:12px;color:#666666;width:180px;}
/*當滑鼠放到文字框時，提示文字的樣式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*當文字框內容不符合要求時，提示文字的樣式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*當文字框內容輸入正確時，提示文字的樣式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
</style>
<script type="text/javascript">
/*通過ID獲取HTML物件的通用方法，使用getEle代替函式名稱*/
function getEle(elementId){
return document.getElementById(elementId);
}
/*當滑鼠放在使用者名稱文字框時，提示文字及樣式*/
function userNameFocus(){
var userNameId=getEle("userNameId");
userNameId.className="import_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br/>2、只能以數字、字母開頭或結尾，且長度為4-18";
}
/*當滑鼠離開使用者名稱文字框時，提示文字及樣式*/
function userNameBlur(){
var userName=getEle("userName");
var userNameId=getEle("userNameId");
var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="使用者名稱不能為空，請輸入使用者名稱";
return false;
}
if(reg.test(userName.value)==false){
userNameId.className="error_prompt";
userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成<br/>2、只能以數字、字母開頭或結尾，且長度為4-18";
return false;
}
userNameId.className="ok_prompt";
userNameId.innerHTML="使用者名稱輸入正確";
return true;
}
/*當滑鼠放在密碼文字框時，提示文字及樣式*/
function pwdFocus(){
var pwdId=getEle("pwdId");
pwdId.className="import_prompt";
pwdId.innerHTML="密碼長度為6-16";
}
/*當滑鼠離開密碼文字框時，提示文字及樣式*/
function pwdBlur(){
var pwd=getEle("pwd");
var pwdId=getEle("pwdId");
if(pwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼不能為空，請輸入密碼";
return false;
}
if(pwd.value.length<6 || pwd.value.length>16){
pwdId.className="error_prompt";
pwdId.innerHTML="密碼長度為6-16";
return false;
}
pwdId.className="ok_prompt";
pwdId.innerHTML="密碼輸入正確";
return true;
}
/*當滑鼠離開重複密碼文字框時，提示文字及樣式*/
function repwdBlur(){
var repwd=getEle("repwd");
var pwd=getEle("pwd");
var repwdId=getEle("repwdId");
if(repwd.value==""){
repwdId.className="error_prompt";
repwdId.innerHTML="重複密碼不能為空，請重複輸入密碼";
return false;
}
if(repwd.value!=pwd.value){
repwdId.className="error_prompt";
repwdId.innerHTML="兩次輸入的密碼不一致，請重新輸入";
return false;
}
repwdId.className="ok_prompt";
repwdId.innerHTML="兩次密碼輸入正確";
return true;
}
/*當滑鼠放在暱稱文字框時，提示文字及樣式*/
function nickNameFocus(){
var nickNameId=getEle("nickNameId");
nickNameId.className="import_prompt";
nickNameId.innerHTML="1、包含漢字、字母、數字、下劃線以及@!#getEle%&*特殊字元<br/>2、長度為4－20個字元<br/>3、一個漢字佔兩個字元";
}
/*當滑鼠離開暱稱文字框時，提示文字及樣式*/
function nickNameBlur(){
var nickName=getEle("nickName");
var nickNameId=getEle("nickNameId");
var k=0;
var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配暱稱
var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字元
if(nickName.value==""){
nickNameId.className="error_prompt";
nickNameId.innerHTML="暱稱不能為空，請輸入暱稱";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.className="error_prompt";
nickNameId.innerHTML="只能由漢字、字母、數字、下劃線以及@!#getEle%&*特殊字元組成";
return false;
}
var len=nickName.value.replace(chinaReg,"ab").length; //把中文字元轉換為兩個字母，以計算字元長度
if(len<4||len>20){
nickNameId.className="error_prompt";
nickNameId.innerHTML="1、長度為4－20個字元<br/>2、一個漢字佔兩個字元";
return false;
}
nickNameId.className="ok_prompt";
nickNameId.innerHTML="暱稱輸入正確";
return true;
}
/*當滑鼠放在關聯手機號文字框時，提示文字及樣式*/
function telFocus(){
var telId=getEle("telId");
telId.className="import_prompt";
telId.innerHTML="1、手機號碼以13，15，18開頭<br/>2、手機號碼由11位數字組成";
}
/*當滑鼠離開關聯手機號文字框時，提示文字及樣式*/
function telBlur(){
var tel=getEle("tel");
var telId=getEle("telId");
var reg=/^(13|15|18|17|14|19)\d{9}$/;
if(tel.value==""){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼不能為空，請輸入關聯手機號碼";
return false;
}
if(reg.test(tel.value)==false){
telId.className="error_prompt";
telId.innerHTML="關聯手機號碼輸入不正確，請重新輸入";
return false;
}
telId.className="ok_prompt";
telId.innerHTML="關聯手機號碼輸入正確";
return true;
}
/*當滑鼠放在保密郵箱文字框時，提示文字及樣式*/
function emailFocus(){
var emailId=getEle("emailId");
emailId.className="import_prompt";
emailId.innerHTML="請輸入您常用的電子郵箱";
}
/*當滑鼠離開保密郵箱文字框時，提示文字及樣式*/
function emailBlur(){
var email=getEle("email");
var emailId=getEle("emailId");
var reg=/^\
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱不能為空，請輸入保密郵箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="保密郵箱格式不正確，請重新輸入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="保密郵箱輸入正確";
return true;
}
/*表單提交時驗證表單內容輸入的有效性*/
function checkForm(){
var flagUserName=userNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
var flagNickName=nickNameBlur();
var flagTel=telBlur();
var flagEmail=emailBlur();
userNameBlur();
pwdBlur();
repwdBlur();
nickNameBlur();
telBlur();
emailBlur();
if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
return true;
}
else{
return false;
}
}
</script>
<title>矽谷商城</title>
</head>
<body>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" onsubmit="return checkForm()">
<dl>
<dt>使用者名稱：</dt>
<dd><input type="text" id="userName" class="inputs" onfocus="userNameFocus()" onblur="userNameBlur()" /> </dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登入密碼：</dt>
<dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重複登入密碼：</dt>
<dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性別：</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>暱稱：</dt>
<dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>關聯手機號：</dt>
<dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密郵箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="validate/img.png"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</div>
</body>
</html>