//=================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; //电话 010-68728701
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' /> " + msgOK;
}
else
{
controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' /> 数据格式验证通过";
}
return true;
}
else
{
//验证未通过
controlDiv.className="explain_red";
if(msgError!="")
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' /> " + msgError;
}
else
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' /> 数据格式不正确,请重新填写";
}
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' /> " + msgRequired;
}
else
{
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' /> 此项不能为空";
}
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' /> "+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' /> " + msgOK;
}
else
{
controlDiv.className="explain_red";
controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' /> " + 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='...' /> 正在验证用户名是否可用 请稍后......";
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' /> 真实姓名已经存在，请在真实姓名上加一个字以区分不同用户";
json.error = controlDiv;
}
else if(resultText=="nohave")
{
controlDiv.className="explain_pass";
controlDiv.innerHTML =" <img alt='恭喜！' src='images/ico_face_green.gif' /> 真实姓名验证通过";
}
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;
}
}
}
分享到：
相关推荐
通过上述分析可以看出，该用户注册页面的JavaScript验证逻辑较为全面，能够有效地提升用户输入数据的质量，同时也能提高系统的安全性。开发者可以根据实际需求调整这些验证规则，如增加更多的自定义验证或改变现有...
**二、JavaScript页面特效制作** JavaScript可以实现各种吸引人的页面特效，提升网站的视觉吸引力和用户体验。以下是一些常见的JavaScript特效： 1. **滑动菜单**：通过JavaScript可以创建响应式导航菜单，实现...
在"JavaScript客户端验证和页面特效制作.jar"这个资源中，我们可以推测它可能包含了一系列关于JavaScript学习的章节或教程，尤其是侧重于这两方面的内容。"chapter1"可能是系列教程的第一部分，可能涵盖了基础的...
本项目是一个关于“一个简单的带有javascript验证的注册页面”，主要关注的是前端验证技术，利用JavaScript语言来确保用户输入的数据符合特定的要求，提高用户体验并减轻服务器端的压力。 JavaScript是一种在客户端...
在本课程“JavaScript客户端验证和页面特效制作”中，我们将深入探讨如何利用JavaScript来增强用户体验，并确保数据的有效性和安全性。 一、JavaScript客户端验证 客户端验证是在用户提交数据之前，在用户的设备上...
JavaScript是Web开发中不可或缺的一部分，尤其在客户端验证和页面特效制作方面发挥着重要作用。这个"javascript客户端验证和页面特效制作项目案例"旨在帮助学习者掌握JavaScript的核心概念，并将其应用于实际项目中...
### JavaScript客户端验证与页面特效制作知识点详解 #### 第一章：JavaScript的基本特征 ##### 一、关于JavaScript JavaScript 是一种轻量级的编程语言，它最初由 Netscape 和 Sun Microsystems 共同开发。该语言...
JavaScript客户端验证和页面特效制作(JavaScript)第一章
本教程将带你深入了解如何使用JavaScript进行前台页面的完全验证，这对于任何初学者来说都是一个重要的学习步骤。 JavaScript验证通常指的是在用户提交表单之前，通过JavaScript对用户输入的数据进行检查，确保它们...
实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域：页面设置和表单验证。在Web开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的...
JavaScript是Web开发中不可或缺的一部分，尤其在客户端验证和创建页面特效方面发挥着重要作用。北大青鸟的这门课程，"JavaScript客户端验证和页面特效制作"，旨在深入讲解这两个主题，帮助学员掌握实际开发中的关键...
在“JAVASCRIPT页面效果实例”中，我们可以深入探讨如何使用JavaScript来增强用户体验并创建引人入胜的网页效果。下面将详细介绍几个关键的JavaScript页面效果及其实现方法。 1. **页面加载动画** 当用户访问网站...
javascript注册页面代码（只包含用户名&密码&邮箱的验证）
ACCPS2内测可能指的是一个专门的培训课程或者项目，专注于教授JavaScript客户端验证和页面特效制作的实践技能。在这个课程或项目中，参与者可能需要学习如何有效地利用JavaScript进行客户端数据验证，并掌握创建各种...
北大青鸟5.0 2期 JavaScript客户端验证和页面特效制作.part1.rar 教师用资料，4分，下全才能解压
JavaScript是Web开发中不可或缺的一部分，尤其在客户端验证和页面特效制作方面发挥着重要作用。这份"JavaScript客户端验证和页面特效制作全部PPT"的资源，旨在深入讲解如何利用JavaScript技术实现高效且用户友好的...