javascript 页面验证

//=================CurrencyAjax0.1===========================
/*

名 称： PageValidator
版 本： 0.1
作 者： 杜庆明
修改日期： 2007年5月30日

作 用：
对页面上的用户输入的数据进行验证

主 类：
控件获得焦点时执行：
getOnFocus(control, msg)

控件失去焦点时执行：
RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired)

专门为重复输入密码而写的：
CompareValidator(controlUI1, controlUI2, compare, msgOK, msgError, must)

专门为验证用户名而写的：(其中要用的CurrencyAjax.js文件做为ajax发送验证请求)
ValidatorUserName(control,regularType,msgError,msgOK,msgRequired)

使用方法：
请看下面的说明

注意：
1.要用的CurrencyAjax.js文件做为ajax发送验证请求.
2.此文件必须的CSS样式文件
// 默认灰色
.explain_gray {
color: #999999; // 边框 下
padding-top: 3px; //
padding-right: 3px; //
padding-left: 3px; //
padding-bottom: 3px; // 背景颜色
overflow: hidden; //
width: 420px; // 宽
height: 30px // 高 ;
font-size: 12px;
font-style: italic;
text-decoration: blink;
background-color: #EEEEEE;
border: 1px solid #999999;
}

// 获得焦点
.explain_blue {
color: #5555FF; // 边框 下
padding-top: 3px; //
padding-right: 3px; //
padding-left: 3px; //
padding-bottom: 3px; // 背景颜色
overflow: hidden; //
width: 420px; // 宽
height: 30px // 高 ;
background-color: #EEEEFF;
border: 1px solid #5555FF;
}

// 验证错误
.explain_red {
color: red;
BORDER-RIGHT: #ff7b67 1px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #ff7b67 1px solid;
PADDING-LEFT: 3px;
BACKGROUND: #feeeed;
PADDING-BOTTOM: 3px;
OVERFLOW: hidden;
BORDER-LEFT: #ff7b67 1px solid;
WIDTH: 420px;
PADDING-TOP: 3px;
BORDER-BOTTOM: #ff7b67 1px solid;
HEIGHT: 30px
}

// 验证通过
.explain_pass {
color: #32A2B1;
padding-top: 3px;
padding-right: 3px;
padding-left: 3px;
padding-bottom: 3px;
overflow: hidden;
width: 420px;
height: 30px;
font-style: oblique;
background-color: #EDF9FA;
border: 1px solid #38b5c7;
}
*/
//==================================================== 代码部分 ======================================================
var json={
"error":null
}

// 根据参数返回一个政则表达式
function getRegExpStr(regString)
{
var regExp = "";
switch(regString)
{
case 'reg_userName': regExp = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/; break; //用户名
case 'reg_passWord': regExp = /[\w]{4,14}$/; break; //密码
case 'reg_realName': regExp = /^[\u4E00-\u9FA0][\u4E00-\u9FA0]{1,15}$/; break; //真实姓名
case 'reg_email': regExp = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*$/; break; //电子邮件地址
// case 'reg_email': regExp = /\w+@\w+\.[a-z]+/; break; //电子邮件地址 比较宽松
case 'reg_cardid': regExp = /^[1-9][0-9]{14,17}$/; break; //身份证号
//case 'reg_time': regExp = //; break; //
case 'reg_date': regExp = /((^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(10|12|0?[13578])([-\/\._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(11|0?[469])([-\/\._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))([-\/\._])(0?2)([-\/\._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([3579][26]00)([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][0][48])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][2468][048])([-\/\._])(0?2)([-\/\._])(29)$)|(^([1][89][13579][26])([-\/\._])(0?2)([-\/\._])(29)$)|(^([2-9][0-9][13579][26])([-\/\._])(0?2)([-\/\._])(29)$))/; break; //日期 2006-12-4 YYYY/MM/DD YYYY_MM_DD YYYY.MM.DD
case 'reg_telephone': regExp = /\d{3}-\d{8}|\d{4}-\d{7}$/; break; //电话　[phone]
case 'reg_callphone': regExp = /^[1][0-9]{10}$/; break; //手机号码
case 'reg_qq': regExp = /^[1-9][0-9]{4,15}$/; break; //Tencen QQ 号码
case 'reg_www': regExp = /(?:(?:http[s]?|ftp):\/\/)?[^\/\.]+?\.[^\.\\\/]+?\.\w{2,}$/i; break; //网址
case 'reg_enchar': regExp = /[a-zA-Z][a-zA-Z0-9_]{4,19}$/;; break; //可以包含数字、字母
default: regExp = "";
}
return regExp;
}
/**
* 当控件获得焦点时提示用户输入
*
* control: 当前控件，一般为"this"即可
* msg: 控件获得焦点时高亮显示的内容
*
* 使用实例：
* onfocus="getOnFocus(this,'用户名必须以4-20 个字符 (仅限大小写字母,数字,下划线等)组成，注册后不可修改。')"
*
*/
function getOnFocus(control, msg)
{
var controlId = control.id;
if(controlId==null || controlId=="")
{
controlId = control.name;
}
//alert(controlId);
if(controlId!=null && controlId!="")
{
var controlDiv = document.getElementById(controlId+"Div");//取得要更改样式和控件
if(controlDiv==null)
{
alert("在本页面中没有找到“id”或“name”属性为：“" + controlId + "Div" + "”的控件。");
}
else
{
controlDiv.className="explain_blue";
if(msg!=null && msg!="")
{
controlDiv.innerHTML = msg;
}
}
}
else
{
alert("在本页面中没有找到“id”或“name”属性为：“" + control.id + " " + control.name + " ”的控件。");
}
}
/**
*
* 用一个正则表达式去验证值是否匹配
* control: 要验证的控件
* regularType: 验证时要有的正则表达式
* msgError: 验证错误时显示的内容
* msgOK: 验证通过时显示的内容
* msgRequired: 如果用户没有输入内容时显示的信息
*
* 使用实例：
*　 onblur="RegularExpressionValidator(this,
* 'reg_date',
* '出生日期格式不正确,请重新输入正确的出生日期',
* '出生日期格式验证通过',
* '出生日期不能为空');"
*
*/
function RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired)
{
regular = getRegExpStr(regularType);
var controlId = control.id;
if(controlId==null||controlId=="")
{
controlId = control.name;
}
var controlDiv = document.getElementById(controlId+"Div");//取得要更改样式的控件
var controlValue = control.value;
if(regular == "")
{
//alert("您输入的正则表达式“"+ regularType +"”不正确，请输入正确的验证表达式！");
controlDiv.className="explain_gray";
return false;
}
//判断控件是否存在　如果不存在弹出对话框提示用户
if(controlDiv==null)
{
alert("RegularExpressionValidator(control,regular,msgError,msgOK,msgRequired)“"+controlId+"Div"+"”不存在");
}

if(controlValue!="")
{
if (regular.exec(controlValue))
{
//验证通过
controlDiv.className="explain_pass";
//alert(controlDiv.className);
if(msgOK!="")
{
controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;" + msgOK;
}
else
{
controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;数据格式验证通过";
}
return true;
}
else
{
//验证未通过
controlDiv.className="explain_red";
if(msgError!="")
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgError;
}
else
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;数据格式不正确,请重新填写";

}
json.error = controlDiv;
return false;
}
}
else if(msgRequired!=null)
{
//不能为空
controlDiv.className="explain_red";
if(msgRequired!="")
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgRequired;
}
else
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;此项不能为空";
}
json.error = controlDiv;
return false;
}
else if(msgRequired==null)
{
controlDiv.className="explain_gray";
return false;
}
}
/**
*
* 两个控件的值相比较
* controlUI1　比较的第一个控件
* controlUI2　比较的第二个控件
* compare　比较的操作符
* msgOK　当比较通过时显示的提示信息
* msgError 当比较未通过时显示的提示信息
* must 当有控件值为空时是否进行比较
*
* 使用实例：
* onblur="RegularExpressionValidator(this,'reg_passWord',
* '密码的长度最少4个字符但不超过15个字符,不能包含除字母、数字和下划线以外的字符',
* '密码格式验证通过',
* '密码不能为空')"
*
*
*/
function CompareValidator(controlUI1, controlUI2, compare, msgOK, msgError, must)
{
var value1 = document.getElementById(controlUI1).value;
var value2 = document.getElementById(controlUI2).value;
var controlDiv = document.getElementById(controlUI2+"Div");//取得要更改样式的控件
var compareResult = false;

if(!must)
{
if(value1 == "" || value2 == "")
{
return;　//如果不是必须的，当第三个值为空时不再判断两个值是否相等
}
}
else
{
if(value1 == "" || value2 == "")
{
controlDiv.className="explain_red";
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;"+msgError;
return;　//如果不是必须的，当第三个值为空时不再判断两个值是否相等
}
}
//alert(value1+"---"+compare+"---"+value2);
if(compare == "==")
{
if(value1 == value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}
else if(compare == ">")
{
if(value1 > value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}
else if(compare == "<")
{
if(value1 < value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}
else if(compare == ">=")
{
if(value1 >= value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}
else if(compare == "<=")
{
if(value1 <= value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}
else if(compare == "!=")
{
if(value1 != value2)
{
compareResult = true;
}
else
{
compareResult = false;
}
}

// 比较是否相等
if(compareResult)
{
controlDiv.className="explain_pass";
controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;" + msgOK;
}
else
{
controlDiv.className="explain_red";
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgError;
json.error = controlDiv;
}
}
/**
*
* 功能介绍：
* 首先用正则表达式验证用户名的格式是否正确，
* 如果正确则调用 CurrencyAjax.startRequest 向服务器发送请求验证用户名是否已经存在
*
* 使用实例：
* onblur="ValidatorUserName(this,
* 'reg_userName',
* '用户名格式不正确。正确的用户名应该以字母开头，可包含5-20 个字符(包括大小写字母,数字,下划线等)，注册后不可修改。',
* '用户名格式验证通过',
* '用户名不能为空');"
*
*/
function ValidatorUserName(control,regularType,msgError,msgOK,msgRequired)
{
var controlId = control.id;
controlDiv = document.getElementById(controlId+"Div");//取得要更改样式的控件

if(RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired))
{
//如果格式验证通过则连接数据库查看此用户名是否已经存在
controlDiv.className="explain_red";
controlDiv.innerHTML = "<img src='images/guage.gif' alt='...' />&nbsp;&nbsp;正在验证用户名是否可用&nbsp;请稍后......";
CurrencyAjax.startRequest("GET", "ValidatorUserName.aspx", "userName="+control.value, ValidatorUserNamePostback);
}
}
var ValidatorUserNamePostback = function(resultText)
{
alert(resultText);
if(resultText=="have")
{
controlDiv.className="explain_red";
controlDiv.innerHTML ="<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;真实姓名已经存在，请在真实姓名上加一个字以区分不同用户";
json.error = controlDiv;
}
else if(resultText=="nohave")
{
controlDiv.className="explain_pass";
controlDiv.innerHTML =" <img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;真实姓名验证通过";
}
else
{
alert("从服务器返回来的数据不能识别，只能返回“have”或“nohave”");
}
}
/**
*
* 在表间提交之后执行，可以写在用来提交表单的按钮上
*
* 功能：
* 查检 json.error 的值是否为空
* 如果不为空则查检其指向的控件的错误信息是否是显示的
* 如果显示则将错误信息弹出并取消表单的提交，否则继续提交
*
* 使用实例：
* <asp:Button ID="bt_btUserRegister" runat="server" Text="　注册　" class="input_button" OnClick="bt_btUserRegister_Click" OnClientClick="javascript:return RegisterLoginUser()" />
* 或
* <input type="button" onclick="javascript:return RegisterLoginUser()" />
*
*/
function RegisterLoginUser()
{
if(json.error!=null)
{
if(json.error.className="explain_red")
{
alert(json.error.innerText);
json.error.focus();
return false;
}
}
}