一、登陆页面:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title> Insert
title here</title >
<link rel= "stylesheet" type ="text/css" href="../../style/css.css" />
<script type= "text/javascript" src="../../script/jquery-1.7.2.js" ></script>
<script type= "text/javascript" src="../../script/common.js" ></script>
<script type= "text/javascript">
$(function(){
//1.username
$( ":text[name=userName]").focus(function (){
//得到焦点时，推断当前文本框中的值，假设是默认值。则删除
if(this .value
== this.defaultValue) {
this.value
= "" ;
}
}).blur( function(){
//失去焦点时对文本内容进行验证
//去前后空格
var userNameStr
= $.trim(this.value);
//假设去掉前后空格后为空字符串。则恢复为默认值
if(userNameStr
== "" ) {
userNameStr = this.defaultValue;
}
//使用正則表達式进行验证
showError(regObj.userNameReg.test(userNameStr), errorMsg.userNameFlag);
//最后将去掉前后空格的值写回文本框
this.value
= userNameStr;
//设置是否能提交的标识符
submitFlag.userNameFlag = regObj.userNameReg.test(userNameStr);
});
//2.password
$( ":password[name=pwd]").blur(function (){
var pwdStr
= $.trim(this.value);
showError(regObj.pwdReg.test(pwdStr), errorMsg.pwdFlag);
submitFlag.pwdFlag = regObj.pwdReg.test(pwdStr);
});
//3.确认password
$( ":password[name=pwdAgain]").blur(function (){
var pwdStr
= $(":password[name=pwd]" ).val();
var pwdAgainStr
= $.trim(this.value);
showError((pwdStr == pwdAgainStr), errorMsg.pwdAgainFlag);
submitFlag.pwdAgainFlag = (pwdStr == pwdAgainStr);
});
//4.email
$( ":text[name=email]").blur(function (){
var emailStr
= $.trim(this.value);
if(emailStr
== "" ) {
showError( true, null );
submitFlag.emailFlag = true;
} else{
showError(regObj.emailReg.test(emailStr), errorMsg.emailFlag);
submitFlag.emailFlag = regObj.emailReg.test(emailStr);
}
});
//5.提交button
$( ":submit").click(function (){
for ( var flag in submitFlag)
{
if(!submitFlag[flag])
{
showError( false,
errorMsg[flag]);
//阻止表单提交
return false ;
}
}
});
//6.重置
$( ":reset").click(function (){
//设置提示消息为空
showError( true, null );
//设置提交标记对象为初始值
submitFlag.reset();
});
});
</script>
</head>
<body>
<form action="registSuccess.html" method= "post">
<table id= "formTable">
<tr>
<td colspan= "2" id ="msgTd"> </td >
</tr>
<tr>
<td> username：</td >
<td>< input class ="formInp" type= "text" name="userName" value="请输入username" /></ td>
</tr>
<tr>
<td> password：</td >
<td>< input class ="formInp" type="password" name="pwd" /></td>
</tr>
<tr>
<td> 确认password：</td >
<td>< input class ="formInp" type="password" name="pwdAgain" /></td>
</tr>
<tr>
<td> 邮箱：</td >
<td>< input class ="formInp" type= "text" name="email" /></td >
</tr>
<tr>
<td> 验证码：</td >
<td>
<input class= "inpType" id="codeInp" type="text" name= "code" />
<img id= "codeImg" src="../../images/Validate.jpg" />
</td>
</tr>
<tr>
<td colspan= "2" class ="centerTd">
<input class= "btn" type ="submit" id="submitBtn" value="注冊" />
<input class= "btn" type ="reset" id="resetBtn" value="重置" />
</td>
</tr>
</table>
</form >
</body>
</html>
二、注冊页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title> Insert
title here</title >
<link rel= "stylesheet" type ="text/css" href="../../style/css.css" />
<script type= "text/javascript" src="../../script/common.js" ></script>
<script type= "text/javascript" src="../../script/jquery-1.7.2.js" ></script>
<script type= "text/javascript">
$(function(){
//1.username
$( ":text[name=userName]").focus(function (){
if(this .value
== this.defaultValue) {
this.value
= "" ;
}
}).blur( function(){
var userNameStr
= $.trim(this.value);
if(userNameStr
== "" ) {
userNameStr = this.defaultValue;
}
showError(regObj.userNameReg.test(userNameStr), errorMsg.userNameFlag);
submitFlag.userNameFlag = regObj.userNameReg.test(userNameStr);
this.value
= userNameStr;
});
//2.password
$( ":password").blur(function (){
var pwdStr
= $.trim(this.value);
showError(regObj.pwdReg.test(pwdStr), errorMsg.pwdFlag);
submitFlag.pwdFlag = regObj.pwdReg.test(pwdStr);
});
//3.登录button
$( ":submit").click(function (){
//假设username不为真
if(!submitFlag.userNameFlag){
showError( false,
errorMsg.userNameFlag);
return false ;
}
//假设password不为真
if(!submitFlag.pwdFlag)
{
showError( false,
errorMsg.pwdFlag);
return false ;
}
});
//4.重置button
$( ":reset").click(function (){
showError( true, null );
submitFlag.reset();
});
});
</script>
</head>
<body>
<form action="loginSuccess.html" method= "post">
<table id= "formTable">
<tr>
<td colspan= "2" id ="msgTd"> </td >
</tr>
<tr>
<td> username：</td >
<td>< input class ="formInp" type= "text" name="userName" value="请输入username" /></ td>
</tr>
<tr>
<td> password：</td >
<td>< input class ="formInp" type="password" name="pwd" /></td>
</tr>
<tr>
<td colspan= "2">
<input type= "checkbox" name="rememberMe" value="rm" />记住我
</td>
</tr>
<tr>
<td colspan= "2" class ="centerTd">
<input class= "btn" type ="submit" id="submitBtn" value="登录" />
<input class= "btn" type ="reset" id="resetBtn" value="重置" />
</td>
</tr>
</table>
</form >
<div id="languageDiv"> 中文|English</div >
</body>
</html>
三、common.js
/**
* 导入jQuery后，删除了myTrim()函数，同一时候将regObj对象中的spaceReg删除
*/
// 将所有的正則表達式封装为一个对象
var regObj = {
userNameReg : /^[a-zA-Z_][a-zA-Z_-0-9]{5,9}$/,
pwdReg : /^[a-zA-Z0-9]{6,12}$/,
emailReg : /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/
};
// 使用全局变量作为表单提交是否能放行的标记
var submitFlag = {
userNameFlag : false,
pwdFlag : false,
pwdAgainFlag : false,
emailFlag : true,//
Email默认情况下同意提交
reset : function()
{
this.userNameFlag
= false;
this.pwdFlag
= false;
this.pwdAgainFlag
= false;
this.emailFlag
= true;
},
toString : function(){
return this .userNameFlag
+ " " + this.pwdFlag
+ " " + this .pwdAgainFlag
+ " " + this.emailFlag;
}
};
// 将错误消息封装到一个对象中
var errorMsg = {
userNameFlag : "^_^username要求6-10位且由数字字母下划线-组成" ,
pwdFlag : "^_^password要求6-12位大写和小写字母数字" ,
pwdAgainFlag : "^_^确认password必须和password一致" ,
emailFlag : "^_^Email格式不对"
};
function showError(flag, message) {
if(flag)
{
//假设可以通过验证，则清除错误信息
//使用text()函数不能正确识别 。所以改用 html()函数
$( "#msgTd").html(" " );
}else{
//假设不能通过验证，则在#msgTd显示错误信息
$( "#msgTd").html(message);
}
}