jQuery.Validator 和 YUI.Validator（验证表单框架）

效果：

jQuery.Validator:http://www.yaohaixiao.com/validator/jquery.html
YUI.Validator:http://www.yaohaixiao.com/validator/index.html

源代码下载：http://www.yaohaixiao.com/validator/validator.rar

jquery.validator.js代码：

(function(){
var isFunction = jQuery.isFunction,
indexOf = (Array.prototype.indexOf) ? function(a, val){
return Array.prototype.indexOf.call(a, val);
}: function(a, val){
var i = 0, len;
for (len = a.length; i < len ; i = i + 1) {
if (a[i] === val) {
return i;
}
}

return -1;
};

doc = document,

RULES = {
require: /.+/,
username: /^[\u4E00-\u9FA5A-Za-z0-9_\ ]{3,20}$/i,
password: /^[a-zA-Z0-9\_\-\~\!\%\*\@\#\$\&\.\(\)\[\]\{\}\<\ > \?\\\/\'\"]{3,20}$/,
number: /^\d+$/,
money: /^(([1-9]\d*)|(([0-9]{1}|[1-9]+)\.[0-9]{1,2}))$/,
per: /^(?:[1-9][0-9]?|100)(?:\.[0-9]{1,2})?$/,
email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
phone: /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
mobile: /^((\(\d{2,3}\))|(\d{3}\-))?((13\d{9})|(15[35890]\d{8})|(186\d{8}))$/,
url: /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\- &_ ~`@[\]\':+!]*([^ <> \"])*$/,
ip: /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/,
currency: /^\d+(\.\d+)?$/,
zip: /^[1-9]\d{5}$/,
qq: /^[1-9]\d{4,8}$/,
english: /^[A-Za-z]+$/,
chinese: /^[\u0391-\uFFE5]+$/,
integer: /^[-\+]?\d+$/,
'double': /^[-\+]?\d+(\.\d+)?$/,
idcard: /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3})|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{4}|\d{3}[x]))$/
},
TIPS = {
require: {
"tips": "该信息为必填项，请填写！",
"warn": "对不起，必填信息不能为空，请填写！"
},
username: {
"tips": "5~20个字符，由中文、英文字母和下划线组成。",
"warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。",
"error": "对不起，该用户名已经被注册。请更换一个用户名，或者使用该用户名 < a href =\"login.html\" > 登录 </ a > 。"
},
password: {
"tips": "3~20个字符，由英文字母，数字和 < a name ='spChar' title ='\_ \- \~ \! \% \* \@ \# \$ \& \. \( \) \[ \] \{ \} \< \ > \? \\ \/ \' \"'>特殊符号 < \/a > 组成。",
"warn": "对不起，您填写的密码包含非法字符。",
"error": "对不起，两次输入的密码不一致！"
},
number: {
"tips": "请输入数字！",
"warn": "对不起，您填写的用户名包含非法字符。"
},
date: {
"tips": "请填写日期！",
"warn": "对不起，您填写的日期格式不正确，正确格式为：1989-09-23"
},
money: {
"tips": "请输入金额！",
"warn": "对不起，您填写的金额格式不正确。金额必须是数字，例如：“60” 或者 “60.59”。"
},
per: {
"tips": "请输入百分比！",
"warn": "对不起，您填写的百分比格式不正确！"
},
email: {
"tips": "请输入您常用的E-mail邮箱号，以便我们联系您，为您提供更好的服务！",
"warn": "对不起，您填写的E-mail格式不正确！这确的格式：yourname@gmail.com。",
"error": "对不起，该E-mail帐号已经被注册。请更换一个个。"
},
phone: {
"tips": "请输入可以联系到您常用的电话号码！",
"warn": "对不起，您填写的电话号码格式不正确！正确的电话号码如：010 - 85789999。"
},
mobile: {
"tips": "请输入可以联系到您的手机号码！",
"warn": "对不起，您填写的手机号码格式不正确！正确的手机号码如：13912345678。"
},
url: {
"tips": "请输入网站地址！",
"warn": "对不起，您填写的网站地址格式不正确！正确的网站地址如：http://www.yourdomain.com/。"
},
ip: {
"tips": "请输入IP地址！",
"warn": "对不起，您填写的IP地址格式不正确！正确的IP地址如：192.168.1.1。"
},
currency: {
"tips": "请输入金额！",
"warn": "对不起，您填写的金额格式不正确！正确的金额格式如：19.00。"
},
zip: {
"tips": "请输入邮政编码！",
"warn": "对不起，您填写的邮政编码格式不正确！正确的邮政编码如：430051。"
},
qq: {
"tips": "请输入您的QQ号！",
"warn": "对不起，您填写的QQ号格式不正确！正确的QQ号如：64392719。"
},
english: {
"tips": "请输入英文字母！",
"warn": "对不起，您填写的内容含有英文字母（A-Z,a-z）以外的非法字符！"
},
chinese: {
"tips": "请输入中文字符！",
"warn": "对不起，您填写的内容含非法字符！"
},
integer: {
"tips": "请输入整数！",
"warn": "对不起，您填写的内容不是整数！"
},
'double': {
"tips": "请输入浮点数！",
"warn": "对不起，您填写的内容格式不正确！"
},
idcard: {
"tips": "请输入身份证号码！",
"warn": "对不起，您填写的身份证号码格式不正确！正确的格式如：420105198809223213。"
}
},
NOT_SAME = '对不起，两次输入的密码不一致！',
SUCC = '成功！',
LVL = 'security-level',
TIP_PASS = 'tip-pass',
TIP_ERROR = 'tip-error',
ITEM_PASS = 'item-pass',
ITEM_ERROR = 'item-error',

chk = function(reg, str){
return reg.test(str);
};

/**
* Validator 表单验证类
*
* @class Validator
* @static
* @author Yaohaixiao
* @version 1.1.0
*/
jQuery.Validator = {
indexOf: indexOf,
/**
* 提示信息框
* @property msgTip {HTMLElement}
*/
msgTip: null,
/**
* 常用的验证规则
* @property RULES
*/
RULES: RULES,
TIPS: TIPS,
/**
* 是否存在错误
* @property hasError (false：没有错误/true：存在错误)
*/
hasError : false,
/**
* 添加的要验证的表单元素
* @property items {Array}
*/
items: [],
/**
* 添加的验证初始化信息
* @property options {Array}
*/
options: [],

/**
* 初始化验证器，确定是否给表单提交绑定自定义的处理功能
*
* < code >
* < pre >
* // 按钮是submit类型
* Validator.setup({
* "form": "frmReg",
* "callback": function(){
* alert('自定义处理方法');
* }
* });
* Validator.setup({
* "form": "frmReg"
* });
*
* // 按钮是button类型
* Validator.setup({
* "submit": "frmReg",
* "callback": function(){
* alert('自定义处理方法');
* }
* });
* Validator.setup({
* "submit": "frmReg"
* });
* </ pre >
* </ code >
*
* @method setup
* @static
* @param {Object} config
* @return {Validator}
*/
setup: function(config){
var form = null, submit = null, callback = null, validator = this;

// 获得验证的表单或者提交按钮
if(config.form){
this.form = $('#'+config.form)[0];
form = $(this.form);
}
else{
if(config.submit){
submit = $('#'+config.submit);
}
}

// 初始化没有成功
if(!form[0] && !submit[0]){
return false;
}

// 获取表单提交时绑定的自定义处理函数
if(config.callback && isFunction(config.callback)){
callback = config.callback;
}

// 给表单提交按钮绑定验证处理
if(form[0]){// 提交按钮是sumbit类型
form.submit(function(evt){
validator.submit.call(validator, callback);

evt.preventDefault();
evt.stopPropagation();
});
}
else{
if(submit[0]){// 提交按钮是button类型
submit.click(function(evt){
validator.submit.call(validator, callback);

evt.preventDefault();
evt.stopPropagation();
});
}
}

return this;
},
/**
* 给表单绑定验证处理，验证全部通过了就提交表单
*
* < code >
* < pre >
* Validator.submit();
*
* Validator.submit(function(){
* alert('这是一个自定义提交处理函数');
* });
* </ pre >
* </ code >
*
* @method sumbit
* @static
* @param {Function} callback - 可选
* @return {Validator}
*/
submit: function(callback){
var form = this.getForm(), i = 0, len = 0, item = null;
// 将绑定的验证内容全部验证一遍
this.validateAll();

for (len = this.items.length; i < len ; i + = 1) {
item = this.items[i];
if($(item).hasClass(ITEM_ERROR)){
this.hasError = true;
break;
}
}

// 如果验证全部通过
if (!this.hasError) {
// 如果绑定了自定义提交处理，执行自定义处理
if (callback) {
callback();
}

if (!hasError) {
if (form) {
form.submit();
}
}
return true;
}
else {
return false;
}

return this;
},
/**
* 添加验证配置项到验证器
*
* <code >
* < pre >
* Validator.add({
* "target": "username",
* "rule": "username"
* });
*
* Validator.add({
* "target": "username",
* "rule": "username"
* }).add{{
* "target": "password",
* "rule": "password"
* }};
* </ pre >
* </ code >
*
* @method add
* @static
* @param {Object} option
* @return {Validator}
*/
add: function(option){
if (!option) {
return false;
}

var item = this.getItem(option);

this.options.push(option);
this.items.push(item);

this.bindValidateHandle(option);

return this;
},
/**
* 移除添加的验证信息
* @method remove
* @static
* @param {Object} option
* @return {Validator}
*/
remove: function(option){
var item = null,
index = indexOf(this.options, option);

this.options.splice(index, 1);

if (this.options.length > 0) {
item = $('#'+option.target)[0];
this.items.splice(index, 1);

//removeListener(item, 'focus', this.styleValidate);
//removeListener(item, 'blur', this.validateItem);

this.hideTip();
this.hasError = false;
this.styleItem(item);
}

return this;
},
/**
* 给需要验证的表单项绑定事件处理函数
*
* < code >
* < pre >
* Validator.bindValidateHandle({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method bindValidateHandle
* @static
* @param {Object} option
* @return {Validator}
*/
bindValidateHandle: function(option){
var validator = this,
rule = option.rule.toLowerCase(),
item = this.getItem(option),
plus = option.plus || null;

item.onfocus = function(ipt){
return function(){
var msg = validator.getTip(option), tipCnt = $('#'+option.tipCnt)[0];

if (ipt.id === 'userId') {
if (ipt.value === ipt.defaultValue) {
ipt.value = '';
}
ipt.style.color = '#000';
}

validator.showTip(ipt, msg, tipCnt);

if (plus) {
validator.bindKeyupHandle.call(validator, option);
}
};
}(item);

item.onblur = function(){
validator.validateItem.call(validator, option);
};

return this;
},
/**
* 给文本输入框绑定keyup处理函数
*
* < code >
* < pre >
* Validator.bindKeyupHandle({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method bindKeyupHandle
* @param {Object} option
* @return {Validator}
*/
bindKeyupHandle: function(option){
var validator = this,
item = this.getItem(option),
plus = option.plus,
lvl = option.level || LVL;

// 如果有密码级别验证
if (plus) {
// 根据自定义的函数验证
if (isFunction(plus)) {
$(item).keyup(plus);
}
else {
// 没有设置自定义级别验证，使用默认的级别验证
$(item).keyup(function(){
validator.checkLevel.call(validator, item, lvl);
});
}
}

return this;
},
/**
* 验证所有需要验证的表单信息
*
* < code >
* < pre >
* Validator.validateAll();
* </ pre >
* </ code >
*
* @method validateAll
* @static
* @return {Validator}
*/
validateAll: function(){
var options = this.options, i = 0, len = 0;

// 一个个的验证需要验证的表单信息
for (len = options.length; i < len ; i + = 1) {
// 验证单个表单项的信息
this.validateItem(options[i]);
}
},
/**
* 验证某一项表单信息
*
* <code >
* < pre >
* Validator.validateItem({
* "target": "username",
* "rule": "username",
* "tips": "5~20个字符，由中文、英文字母和下划线组成。",
* "warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。"
* });
* </ pre >
* </ code >
*
* @method validateItem
* @param {Object} option
*/
validateItem: function(option){
var msg = '',
item = this.getItem(option),
val = item.value,
rule = option.rule.toLowerCase(),
ignoreDefaultChk = option.ignoreDefaultChk || false,
tipCnt = $('#'+option.tipCnt)[0] || null;

// 如果需要先验证常规信息
if (!ignoreDefaultChk) {
// 开始验证RULES中的常规规则
this.validate(rule, val);

if (!this.hasError) {
// 忽略常规验证，就直接使用用户自定义的规则
this.validateCustomize(option);

if (this.hasError) {
msg = option.error || TIPS[rule].error;
}
else {
msg = SUCC;
}
}
else {
msg = option.warn || TIPS[rule].warn;
}
}
else {
// 忽略常规验证，就直接使用用户自定义的规则
this.validateCustomize(option);

if (this.hasError) {
msg = option.error || TIPS[rule].error;
}
else {
msg = SUCC;
}
}

this.styleValidate(item, msg, tipCnt);
},
/**
* 常规信息验证
*
* < code >
* < pre >
* Validator.validate('number', '20');
* // Returns false
*
* Validator.validate('number', 20);
* // Returns true
* </ pre >
* </ code >
*
* @method validate
* @static
* @param {String} rule
* @param {String|Number} val
*/
validate: function(rule, val){
var i = 0, len = 0, REG_STR = '';

rule = rule.toLowerCase();

// 如果验证规规则是date，使用isDate方法验证
if (rule === 'date') {
this.hasError = !this.isDate(val);
}
else {
if (rule === 'image') {
this.hasError = !this.isImage(val);
}
else {
// 如果只有一个规则
if (rule.indexOf('||') === -1) {
REG_STR = RULES[rule];
this.hasError = !chk(REG_STR, val);
}
else {
// 如果有多条规则，只需要满足一种情况时
if (rule.indexOf('||') > -1) {
// 获得全部的验证规则
rule = rule.split('||');
for (len = rule.length; i < len ; i + = 1) {
// 获得某一项验证的规则（正则表达式）
REG_STR = RULES[rule[i]];
// 有一条是正确的
if (chk(REG_STR, val)) {
this.hasError = false;
// 返回结果为真，退出验证
break;
}
else {
this.hasError = true;
}
}
}
else {
// 如果有多条验证规则，且必须满足时
if (rule.indexOf('&&') > -1) {
rule = rule.split('&&');
for (len = rule.length; i < len ; i + = 1) {
REG_STR = RULES[rule[i]];
if (!chk(REG_STR, val)) {
this.hasError = true;
break;
}
else {
this.hasError = false;
}
}
}
}
}
}
}
},
/**
* 验证自定义的规则
*
* <code >
* < pre >
* Validator.validateCustomize({
* "target": "username",
* "rule": "username",
* "tips": "5~20个字符，由中文、英文字母和下划线组成。",
* "warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。",
* "actionURL": "http://www.sbi.com/chkusername.jsp"
* });
* </ pre >
* </ code >
*
* @method validateCustomize
* @static
* @param {Object} option
*/
validateCustomize: function(option){
var AjaxURL = option.action,
toEl = $('#'+option.to)[0],
fn = option.fn,
rule = option.rule.toLowerCase(),
item = null,
val = '',
msg = '';

if(!AjaxURL && !toEl && !fn){
return false;
}

item = this.getItem(option);
val = item.value;

// Ajax 验证
if (AjaxURL) {
this.AjaxValidate.call(this, option);
}
else {
// 密码的一致性验证
if (toEl) {
if (toEl.value !== val) {
this.hasError = true;
}
else {
this.hasError = false;
}
}
else {
// 自定义函数的验证
if (fn) {
this.hasError = !fn();
}
}
}
},
/**
* 获得tip的提示信息
*
* < code >
* < pre >
* Validator.getTip({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method
* @param {Object} option
*/
getTip: function(option){
var item = this.getItem(option),
rule = option.rule.toLowerCase(),
msg = option.tips || TIPS[rule].tips,
chkedTip = item.rel || '';

if(chkedTip){
msg = chkedTip;
}

return msg;
},
/**
* 显示提示框
*
* < code >
* < pre >
* Validator.showTip(document.getElementById('username'), '成功')
* </ pre >
* </ code >
*
* @method shotTip
* @static
* @param {HTMLElement} item
* @param {String} msg
* @param {HTMLElement} tipCnt {Optional}
*/
showTip: function(item, msg, tipCnt){
var top = 0, left = 0;

// 如果还没有创建提示信息框，则创建一个
if (!this.msgTip) {
this.msgTip = doc.createElement('span');
$(this.msgTip).addClass('validator-tip');
doc.body.appendChild(this.msgTip);
$(this.msgTip).show();
}
else { // 如果已经创建，则直接显示
$(this.msgTip).show();
}

// 将信息写入到提示框中
this.msgTip.innerHTML = msg;

if (tipCnt) {
// BUG处理，DOM对象经过多次参数传递，变成了string(DOM的ID值)
// 需要重新使用getElementById()方法获得DOM对象
tipCnt = $(tipCnt)[0];
top = $(tipCnt).offset().top;
left = $(tipCnt).offset().left + tipCnt.offsetWidth + 10;
}
else {
top = $(item).offset().top;
left = $(item).offset().left + item.offsetWidth + 10;
}

$(this.msgTip).CSS({
'top': top + 'px',
'left': left + 'px'
});

// 给提示框添加样式
this.styleTip(item);
},
/**
* 隐藏提示框
*
* < code >
* < pre >
* Validator.hideTip();
* </ pre >
* </ code >
*
* @method hideTip
* @static
*/
hideTip: function(){
var tip = this.msgTip;

if (tip) {
if (tip && tip.style.display === 'block') {
$(tip).hide();
}
}
},
/**
* 根据验证的结果，给tip提示设置样式
* @method styleTip
* @static
* @param {Object} item
*/
styleTip: function(item){
var tip = this.msgTip,
clsName = '';

// 已经通过了验证
if($(item).hasClass(ITEM_PASS)){
$(tip).removeClass(TIP_ERROR);
$(tip).addClass(TIP_PASS);
clsName = TIP_ERROR;
}
else{
// 没有通过了验证
if($(item).hasClass(ITEM_ERROR)){
$(tip).removeClass(TIP_PASS);
$(tip).addClass(TIP_ERROR);
clsName = TIP_PASS;
}
else{
// 之前有样式
if (clsName) {
$(tip).removeClass(className);
}
else{
tip.className = "validator-tip";
}
}
}
},
/**
* 根据验证结果，给对应的输入框添加样式
*
* < code >
* < pre >
* Validator.styleItem(getEl('username'), false);
* </ pre >
* </ code >
*
* @method styleItem
* @static
* @param {HTMLElement} item
* @param {Boolean} hasError - optional
* @return {Validator}
*/
styleItem: function(item){
var error = this.hasError;

if (!error) {
$(item).removeClass(ITEM_ERROR);
$(item).addClass(ITEM_PASS);
}
else {
$(item).removeClass(ITEM_PASS);
$(item).addClass(ITEM_ERROR);
}

return this;
},
/**
* 根据验证结果，给验证表单项和提示框设置样式
*
* < code >
* < pre >
* var user = getEl('username');
* Validator.styleValidate(user, '对不起，两次密码输入不一致！');
* </ pre >
* </ code >
*
* @method styleValidate
* @static
* @param {HTMLElement} item
* @param {String} msg
* @param {HTMLElement} tipCnt
* @return {Validator}
*/
styleValidate: function(item, msg, tipCnt){

item.rel = msg;

// 如果验证没有通过，现实错误的提示信息
if (this.hasError) {
// 设置验证后表单项的样式
this.styleItem(item);

// 现实提示信息
this.showTip(item, msg, tipCnt);
}
else {
// 设置验证后表单项的样式
this.styleItem(item);

// 验证通过，隐藏错误提示信息
this.hideTip(item);
}

return this;
},
/**
* 检测上传文件的扩展名
*
* < code >
* < pre >
* Validator.isImage('img/bg.gif');
* // Returns true;
*
* Validator.isImage('img/reg.asp');
* // Returns false;
* </ pre >
* </ code >
*
* @method isImage
* @static
* @param {String} string
* @returns {Boolean}
*/
isImage: function(string){
var filename = string.replace(/.*(\/|\\)/, ""), fileExt = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
if ((fileExt !== 'jpg') && (fileExt !== 'gif') && (fileExt !== 'jpeg') && (fileExt !== 'png') && (fileExt !== 'bmp')) {
return false;
}
return true;
},
/**
* 验证是否为正确的日期格式
*
* < code >
* < pre >
* Validator.isDate('2011-03-24');
* // Return true;
*
* Validator.isDate('good');
* // Return false;
* </ pre >
* </ code >
*
* @method isDate
* @static
* @param {Date|Any} date - 日期、任意值
* @param {Object} reObj - 自定义的日期验证正则表达式
* @param {String} format - 自定义的日期格式
* @return {Boolean}
*/
isDate: function(date, reObj, format){
format = format || 'yyyy-MM-dd';
var input = date,
i,
o = {},
d = new Date();
f1 = format.split(/[^a-z]+/gi),
f2 = input.split(/\D+/g),
f3 = format.split(/[a-z]+/gi),
f4 = input.split(/\d+/g),
len = f1.length,
len1 = f3.length,
reVal = false,
s = function(s1, s2, s3, s4, s5){
s4 = s4 || 60, s5 = s5 || 2;
var reVal = s3;
if (s1 != undefined && s1 != '' || !isNaN(s1)) {
reVal = s1 * 1;
}
if (s2 != undefined && s2 != '' && !isNaN(s2)) {
reVal = s2 * 1;
}
return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
};

if (len != f2.length || len1 != f4.length) {
return false;
}

for (i = 0; i < len1 ; i + = 1) {
if (f3[i] ! = f4[i]) {
return false;
}
}

for (i = 0; i < len; i + = 1) {
o[f1[i]] = f2[i];
}

o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);
o.dd = s(o.dd, o.d, d.getDate(), 31);
o.hh = s(o.hh, o.h, d.getHours(), 24);
o.mm = s(o.mm, o.m, d.getMinutes());
o.ss = s(o.ss, o.s, d.getSeconds());
o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) {
return false;
}

if (o.yyyy < 100) {
o.yyyy + = (o.yyyy > 30 ? 1900 : 2000);
}

d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

return reVal && reObj ? d : reVal;
},
/**
* 检测密码的安全级别,并设置相应级别提示的背景图片
*
* < code >
* < pre >
* Validator.checkLevel(document.getElementById('password'), 'security-level');
* </ pre >
* </ code >
*
* @method checkLevel
* @static
* @param {HTMLElement} item
* @param {String} level
*/
checkLevel: function(item, level){
var n = this.getLevel(item), percent = [0, 22, 50, 75, 100], lvlZone = $('#'+level);
lvlZone.CSS('backgroundPosition', 'left ' + percent[n] + '%');
},
/**
* 获得密码输入框的密码的安全级别
*
* < code >
* < pre >
* Validator.getLevel(document.getElementById('password'));
* // Returns 0 | 1 | 2 | 3 | 4
* </ pre >
* </ code >
*
* @method getLevel
* @static
* @param {HTMLElement} item
* @param {String} level
* @return {Number}
*/
getLevel : function(item){
var v = item.value, l = v.length, min = 6, level = 0;
if(l < min ){
if (l > 0) {
level = 1;
}
}
else {
if (/^(\d{6,9}|[a-z]{6,9}|[A-Z]{6,9})$/.test(v)) {
level = 1;
}
else {
if (/^[^a-z\d]{6,8}$/i.test(v) || !/^(\d{6,9}|[a-z]{6,9}|[A-Z]{6,9})$/.test(v)) {
level = 2;
}
}
if (!/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\} <> \?\\\/\'\"]*)|.{0,5})$|\s/.test(v)) {
level = l < 10 ? 3 : 4;
}
}
return level;
},
/**
* 自定义的Ajax验证，验证用户名，邮箱，昵称是否存在时可以使用
* @method AjaxValidate
* @static
* @param {Object} option
*/
AjaxValidate: function(option){
var item = this.getItem(option),
AjaxURL = option.action || '',
AjaxParam = option.param || '',
AjaxData = encodeURIComponent(item.value),
AjaxFn = option.AjaxFn || null,
tipCnt = option.tipCnt || null,
validator = this;

if (AjaxURL) {
// 如果设置了自定义的Ajax验证方法，执行自定义的Ajax方法
if (isFunction(AjaxFn)) {
AjaxFn(AjaxURL);
}
else {
// 执行 Validator 默认的Ajax验证方法
jQuery.Ajax({
url: AjaxURL,
dataType:'JSON',
data:{AjaxParam:AjaxData},
cache: false,
success: function(data){
var isPass = jQuery.JSON.parse(data).exist === 'true' ? true : false, msg = '';

if (isPass) {
validator.hasError = false;
msg = SUCC;
}
else {
validator.hasError = true;
msg = option.error || TIPS[option.param].error;
}

validator.styleValidate.call(validator, item, msg, tipCnt);
},
error: function(xhr){
var msg = '错误代码：' + xhr.status;
validator.showTip.call(validator, item, msg, tipCnt);
}
});
}
}
},
/**
* 获得验证项的DOM节点
*
* @method getItem
* @static
* @param {Object} option
* @return {HTMLElement}
*/
getItem: function(option){
var item = null, id = option.target;

item = $('#'+id)[0];

return item;
},
/**
* 获得表单
* @method getForm
* @static
* @return {HTMLElement|Boolean}
*/
getForm: function(){
if(this.form){
return this.form;
}
else{
return false;
}
}
};
})();

YUI.validator.js代码：

(function(){
var Y = YUI,
isFunction = Y.isFunction,
hasClass = Y.hasClass,
getEl = Y.getEl,
stopEvent = Y.stopEvent,

doc = document,

RULES = {
require: /.+/,
username: /^[\u4E00-\u9FA5A-Za-z0-9_\ ]{3,20}$/i,
password: /^[a-zA-Z0-9\_\-\~\!\%\*\@\#\$\&\.\(\)\[\]\{\}\ < \ > \?\\\/\'\"]{3,20}$/,
number: /^\d+$/,
money: /^(([1-9]\d*)|(([0-9]{1}|[1-9]+)\.[0-9]{1,2}))$/,
per: /^(?:[1-9][0-9]?|100)(?:\.[0-9]{1,2})?$/,
email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
phone: /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
mobile: /^((\(\d{2,3}\))|(\d{3}\-))?((13\d{9})|(15[35890]\d{8})|(186\d{8}))$/,
url: /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\- &_ ~`@[\]\':+!]*([^ <> \"])*$/,
ip: /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/,
currency: /^\d+(\.\d+)?$/,
zip: /^[1-9]\d{5}$/,
qq: /^[1-9]\d{4,8}$/,
english: /^[A-Za-z]+$/,
chinese: /^[\u0391-\uFFE5]+$/,
integer: /^[-\+]?\d+$/,
'double': /^[-\+]?\d+(\.\d+)?$/,
idcard: /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3})|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])(\d{4}|\d{3}[x]))$/
},
TIPS = {
require: {
"tips": "该信息为必填项，请填写！",
"warn": "对不起，必填信息不能为空，请填写！"
},
username: {
"tips": "5~20个字符，由中文、英文字母和下划线组成。",
"warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。",
"error": "对不起，该用户名已经被注册。请更换一个用户名，或者使用该用户名 < a href =\"login.html\" > 登录 </ a > 。"
},
password: {
"tips": "3~20个字符，由英文字母，数字和 < a name ='spChar' title ='\_ \- \~ \! \% \* \@ \# \$ \& \. \( \) \[ \] \{ \} \< \ > \? \\ \/ \' \"'>特殊符号 < \/a > 组成。",
"warn": "对不起，您填写的密码包含非法字符。",
"error": "对不起，两次输入的密码不一致！"
},
number: {
"tips": "请输入数字！",
"warn": "对不起，您填写的用户名包含非法字符。"
},
date: {
"tips": "请填写日期！",
"warn": "对不起，您填写的日期格式不正确，正确格式为：1989-09-23"
},
money: {
"tips": "请输入金额！",
"warn": "对不起，您填写的金额格式不正确。金额必须是数字，例如：“60” 或者 “60.59”。"
},
per: {
"tips": "请输入百分比！",
"warn": "对不起，您填写的百分比格式不正确！"
},
email: {
"tips": "请输入您常用的E-mail邮箱号，以便我们联系您，为您提供更好的服务！",
"warn": "对不起，您填写的E-mail格式不正确！这确的格式：yourname@gmail.com。",
"error": "对不起，该E-mail帐号已经被注册。请更换一个个。"
},
phone: {
"tips": "请输入可以联系到您常用的电话号码！",
"warn": "对不起，您填写的电话号码格式不正确！正确的电话号码如：010 - 85789999。"
},
mobile: {
"tips": "请输入可以联系到您的手机号码！",
"warn": "对不起，您填写的手机号码格式不正确！正确的手机号码如：13912345678。"
},
url: {
"tips": "请输入网站地址！",
"warn": "对不起，您填写的网站地址格式不正确！正确的网站地址如：http://www.yourdomain.com/。"
},
ip: {
"tips": "请输入IP地址！",
"warn": "对不起，您填写的IP地址格式不正确！正确的IP地址如：192.168.1.1。"
},
currency: {
"tips": "请输入金额！",
"warn": "对不起，您填写的金额格式不正确！正确的金额格式如：19.00。"
},
zip: {
"tips": "请输入邮政编码！",
"warn": "对不起，您填写的邮政编码格式不正确！正确的邮政编码如：430051。"
},
qq: {
"tips": "请输入您的QQ号！",
"warn": "对不起，您填写的QQ号格式不正确！正确的QQ号如：64392719。"
},
english: {
"tips": "请输入英文字母！",
"warn": "对不起，您填写的内容含有英文字母（A-Z,a-z）以外的非法字符！"
},
chinese: {
"tips": "请输入中文字符！",
"warn": "对不起，您填写的内容含非法字符！"
},
integer: {
"tips": "请输入整数！",
"warn": "对不起，您填写的内容不是整数！"
},
'double': {
"tips": "请输入浮点数！",
"warn": "对不起，您填写的内容格式不正确！"
},
idcard: {
"tips": "请输入身份证号码！",
"warn": "对不起，您填写的身份证号码格式不正确！正确的格式如：420105198809223213。"
}
},
NOT_SAME = '对不起，两次输入的密码不一致！',
SUCC = '成功！',
LVL = 'security-level',
TIP_PASS = 'tip-pass',
TIP_ERROR = 'tip-error',
ITEM_PASS = 'item-pass',
ITEM_ERROR = 'item-error',

chk = function(reg, str){
return reg.test(str);
};

/**
* Validator 表单验证类
*
* @class Validator
* @static
* @author Yaohaixiao
* @version 1.1.0
*/
YUI.Validator = {
/**
* 提示信息框
* @property msgTip {HTMLElement}
*/
msgTip: null,
/**
* 常用的验证规则
* @property RULES
*/
RULES: RULES,
TIPS: TIPS,
/**
* 是否存在错误
* @property hasError (false：没有错误/true：存在错误)
*/
hasError : false,
/**
* 添加的要验证的表单元素
* @property items {Array}
*/
items: [],
/**
* 添加的验证初始化信息
* @property options {Array}
*/
options: [],

/**
* 初始化验证器，确定是否给表单提交绑定自定义的处理功能
*
* < code >
* < pre >
* // 按钮是submit类型
* Validator.setup({
* "form": "frmReg",
* "callback": function(){
* alert('自定义处理方法');
* }
* });
* Validator.setup({
* "form": "frmReg"
* });
*
* // 按钮是button类型
* Validator.setup({
* "submit": "frmReg",
* "callback": function(){
* alert('自定义处理方法');
* }
* });
* Validator.setup({
* "submit": "frmReg"
* });
* </ pre >
* </ code >
*
* @method setup
* @static
* @param {Object} config
* @return {Validator}
*/
setup: function(config){
var form = null, submit = null, callback = null, that = this;

// 获得验证的表单或者提交按钮
if(config.form){
this.form = getEl(config.form);
form = this.form;
}
else{
if(config.submit){
submit = getEl(config.submit);
}
}

// 初始化没有成功
if(!form && !submit){
return false;
}

// 获取表单提交时绑定的自定义处理函数
if(config.callback && isFunction(config.callback)){
callback = config.callback;
}

// 给表单提交按钮绑定验证处理
if(form){// 提交按钮是sumbit类型
Y.on(form, 'submit', function(event){
var evt = event || window.event;
that.submit.call(that, callback);
stopEvent(evt);
});
}
else{
if(submit){// 提交按钮是button类型
Y.on(submit, 'click', function(event){
var evt = event || window.event;
that.submit.call(that, callback);
stopEvent(evt);
});
}
}

return this;
},
/**
* 给表单绑定验证处理，验证全部通过了就提交表单
*
* < code >
* < pre >
* Validator.submit();
*
* Validator.submit(function(){
* alert('这是一个自定义提交处理函数');
* });
* </ pre >
* </ code >
*
* @method sumbit
* @static
* @param {Function} callback - 可选
* @return {Validator}
*/
submit: function(callback){
var form = this.getForm(), i = 0, len = 0, item = null;
// 将绑定的验证内容全部验证一遍
this.validateAll();

for (len = this.items.length; i < len ; i + = 1) {
item = this.items[i];
if(hasClass(item, ITEM_ERROR)){
this.hasError = true;
break;
}
}

// 如果验证全部通过
if (!this.hasError) {
// 如果绑定了自定义提交处理，执行自定义处理
if (callback) {
callback();
}

if (!hasError) {
if (form) {
form.submit();
}
}
return true;
}
else {
return false;
}

return this;
},
/**
* 添加验证配置项到验证器
*
* <code >
* < pre >
* Validator.add({
* "target": "username",
* "rule": "username"
* });
*
* Validator.add({
* "target": "username",
* "rule": "username"
* }).add{{
* "target": "password",
* "rule": "password"
* }};
* </ pre >
* </ code >
*
* @method add
* @static
* @param {Object} option
* @return {Validator}
*/
add: function(option){
if (!option) {
return false;
}

var item = this.getItem(option);

this.options.push(option);
this.items.push(item);

this.bindValidateHandle(option);

return this;
},
/**
* 移除添加的验证信息
* @method remove
* @static
* @param {Object} option
* @return {Validator}
*/
remove: function(option){
var item = null,
that = this,
index = Y.indexOf(this.options, option);

this.options.splice(index, 1);

if (this.options.length > 0) {
item = getEl(option.target);
this.items.splice(index, 1);

removeListener(item, 'focus', this.styleValidate);
removeListener(item, 'blur', this.validateItem);

this.hideTip();
this.hasError = false;
this.styleItem(item);
}

return this;
},
/**
* 给需要验证的表单项绑定事件处理函数
*
* < code >
* < pre >
* Validator.bindValidateHandle({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method bindValidateHandle
* @static
* @param {Object} option
* @return {Validator}
*/
bindValidateHandle: function(option){
var that = this,
rule = option.rule.toLowerCase(),
item = this.getItem(option),
plus = option.plus || null;

item.onfocus = function(ipt){
return function(){
var msg = that.getTip(option), tipCnt = getEl(option.tipCnt);

if (ipt.id === 'userId') {
if (ipt.value === ipt.defaultValue) {
ipt.value = '';
}
ipt.style.color = '#000';
}

that.showTip(ipt, msg, tipCnt);

if (plus) {
that.bindKeyupHandle.call(that, option);
}
};
}(item);

item.onblur = function(el){
return function(){
that.validateItem.call(that, option);
};
}(item);

return this;
},
/**
* 给文本输入框绑定keyup处理函数
*
* < code >
* < pre >
* Validator.bindKeyupHandle({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method bindKeyupHandle
* @param {Object} option
* @return {Validator}
*/
bindKeyupHandle: function(option){
var that = this,
item = this.getItem(option),
plus = option.plus,
lvl = option.level || LVL;

// 如果有密码级别验证
if (plus) {
// 根据自定义的函数验证
if (isFunction(plus)) {
Y.on(item, 'keyup', plus);
}
else {
// 没有设置自定义级别验证，使用默认的级别验证
Y.on(item, 'keyup', function(){
that.checkLevel.call(that, item, lvl);
});
}
}

return this;
},
/**
* 验证所有需要验证的表单信息
*
* < code >
* < pre >
* Validator.validateAll();
* </ pre >
* </ code >
*
* @method validateAll
* @static
* @return {Validator}
*/
validateAll: function(){
var options = this.options, i = 0, len = 0;

// 一个个的验证需要验证的表单信息
for (len = options.length; i < len ; i + = 1) {
// 验证单个表单项的信息
this.validateItem(options[i]);
}
},
/**
* 验证某一项表单信息
*
* <code >
* < pre >
* Validator.validateItem({
* "target": "username",
* "rule": "username",
* "tips": "5~20个字符，由中文、英文字母和下划线组成。",
* "warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。"
* });
* </ pre >
* </ code >
*
* @method validateItem
* @param {Object} option
*/
validateItem: function(option){
var msg = '',
item = this.getItem(option),
val = item.value,
rule = option.rule.toLowerCase(),
ignoreDefaultChk = option.ignoreDefaultChk || false,
tipCnt = option.tipCnt || null;

// 如果需要先验证常规信息
if (!ignoreDefaultChk) {
// 开始验证RULES中的常规规则
this.validate(rule, val);

if (!this.hasError) {
// 忽略常规验证，就直接使用用户自定义的规则
this.validateCustomize(option);

if (this.hasError) {
msg = option.error || TIPS[rule].error;
}
else {
msg = SUCC;
}
}
else {
msg = option.warn || TIPS[rule].warn;
}
}
else {
// 忽略常规验证，就直接使用用户自定义的规则
this.validateCustomize(option);

if (this.hasError) {
msg = option.error || TIPS[rule].error;
}
else {
msg = SUCC;
}
}

this.styleValidate(item, msg, tipCnt);
},
/**
* 常规信息验证
*
* < code >
* < pre >
* Validator.validate('number', '20');
* // Returns false
*
* Validator.validate('number', 20);
* // Returns true
* </ pre >
* </ code >
*
* @method validate
* @static
* @param {String} rule
* @param {String|Number} val
*/
validate: function(rule, val){
var i = 0, len = 0, REG_STR = '';

rule = rule.toLowerCase();

// 如果验证规规则是date，使用isDate方法验证
if (rule === 'date') {
this.hasError = !this.isDate(val);
}
else {
if (rule === 'image') {
this.hasError = !this.isImage(val);
}
else {
// 如果只有一个规则
if (rule.indexOf('||') === -1) {
REG_STR = RULES[rule];
this.hasError = !chk(REG_STR, val);
}
else {
// 如果有多条规则，只需要满足一种情况时
if (rule.indexOf('||') > -1) {
// 获得全部的验证规则
rule = rule.split('||');
for (len = rule.length; i < len ; i + = 1) {
// 获得某一项验证的规则（正则表达式）
REG_STR = RULES[rule[i]];
// 有一条是正确的
if (chk(REG_STR, val)) {
this.hasError = false;
// 返回结果为真，退出验证
break;
}
else {
this.hasError = true;
}
}
}
else {
// 如果有多条验证规则，且必须满足时
if (rule.indexOf('&&') > -1) {
rule = rule.split('&&');
for (len = rule.length; i < len ; i + = 1) {
REG_STR = RULES[rule[i]];
if (!chk(REG_STR, val)) {
this.hasError = true;
break;
}
else {
this.hasError = false;
}
}
}
}
}
}
}
},
/**
* 验证自定义的规则
*
* <code >
* < pre >
* Validator.validateCustomize({
* "target": "username",
* "rule": "username",
* "tips": "5~20个字符，由中文、英文字母和下划线组成。",
* "warn": "对不起，用户名格式不正确。这确的格式如：“robert_yao” 或者 “创业街商户”。",
* "actionURL": "http://www.sbi.com/chkusername.jsp"
* });
* </ pre >
* </ code >
*
* @method validateCustomize
* @static
* @param {Object} option
*/
validateCustomize: function(option){
var AjaxURL = option.action,
toEl = getEl(option.to),
fn = option.fn,
rule = option.rule.toLowerCase(),
item = null,
val = '',
msg = '';

if(!AjaxURL && !toEl && !fn){
return false;
}

item = this.getItem(option);
val = item.value;

// Ajax 验证
if (AjaxURL) {
this.AjaxValidate.call(this, option);
}
else {
// 密码的一致性验证
if (toEl) {
if (toEl.value !== val) {
this.hasError = true;
}
else {
this.hasError = false;
}
}
else {
// 自定义函数的验证
if (fn) {
this.hasError = !fn();
}
}
}
},
/**
* 获得tip的提示信息
*
* < code >
* < pre >
* Validator.getTip({
* "target": "username",
* "rule": "username"
* });
* </ pre >
* </ code >
*
* @method
* @param {Object} option
*/
getTip: function(option){
var item = this.getItem(option),
rule = option.rule.toLowerCase(),
msg = option.tips || TIPS[rule].tips,
chkedTip = item.rel || '';

if(chkedTip){
msg = chkedTip;
}

return msg;
},
/**
* 显示提示框
*
* < code >
* < pre >
* Validator.showTip(document.getElementById('username'), '成功')
* </ pre >
* </ code >
*
* @method shotTip
* @static
* @param {HTMLElement} item
* @param {String} msg
* @param {HTMLElement} tipCnt {Optional}
*/
showTip: function(item, msg, tipCnt){
var top = 0, left = 0, getX = Y.getX, getY = Y.getY;

// 如果还没有创建提示信息框，则创建一个
if (!this.msgTip) {
this.msgTip = doc.createElement('span');
Y.addClass(this.msgTip, 'validator-tip');
doc.body.appendChild(this.msgTip);
this.msgTip.style.display = 'block';
}
else { // 如果已经创建，则直接显示
this.msgTip.style.display = 'block';
}

// 将信息写入到提示框中
this.msgTip.innerHTML = msg;

// 给提示框定位
// @TODO: 目前是定位到验证框的后面，还需要添加显示在输入框上方的定位
// height = this.msgTip.offsetHeight;
if (tipCnt) {
// BUG处理，DOM对象经过多次参数传递，变成了string(DOM的ID值)
// 需要重新使用getElementById()方法获得DOM对象
tipCnt = getEl(tipCnt);
top = getY(tipCnt);
left = getX(tipCnt) + tipCnt.offsetWidth + 10;
}
else {
top = getY(item);
left = getX(item) + item.offsetWidth + 10;
}

Y.setStyles(this.msgTip, {
'top': top + 'px',
'left': left + 'px'
});

// 给提示框添加样式
this.styleTip(item);
},
/**
* 隐藏提示框
*
* < code >
* < pre >
* Validator.hideTip();
* </ pre >
* </ code >
*
* @method hideTip
* @static
*/
hideTip: function(){
var tip = this.msgTip,
display = '';

if (tip) {
display = tip.style.display;
if (tip && display === 'block') {
display = 'none';
}
}
},
/**
* 根据验证的结果，给tip提示设置样式
* @method styleTip
* @static
* @param {Object} item
*/
styleTip: function(item){
var hasClass = Y.hasClass,
replaceClass = Y.replaceClass,
tip = this.msgTip,
clsName = '';

// 已经通过了验证
if(hasClass(item, ITEM_PASS)){
replaceClass(tip, TIP_ERROR, TIP_PASS);
clsName = TIP_ERROR;
}
else{
// 没有通过了验证
if(hasClass(item, ITEM_ERROR)){
replaceClass(tip, TIP_PASS, TIP_ERROR);
clsName = TIP_PASS;
}
else{
// 之前有样式
if (clsName) {
Y.removeClass(tip, className);
}
else{
tip.className = "validator-tip";
}
}
}
},
/**
* 根据验证结果，给对应的输入框添加样式
*
* < code >
* < pre >
* Validator.styleItem(getEl('username'), false);
* </ pre >
* </ code >
*
* @method styleItem
* @static
* @param {HTMLElement} item
* @param {Boolean} hasError - optional
* @return {Validator}
*/
styleItem: function(item){
var replaceClass = Y.replaceClass,
error = this.hasError;

if (!error) {
replaceClass(item, ITEM_ERROR, ITEM_PASS);
}
else {
replaceClass(item, ITEM_PASS, ITEM_ERROR);
}

return this;
},
/**
* 根据验证结果，给验证表单项和提示框设置样式
*
* < code >
* < pre >
* var user = getEl('username');
* Validator.styleValidate(user, '对不起，两次密码输入不一致！');
* </ pre >
* </ code >
*
* @method styleValidate
* @static
* @param {HTMLElement} item
* @param {String} msg
* @param {HTMLElement} tipCnt
* @return {Validator}
*/
styleValidate: function(item, msg, tipCnt){

item.rel = msg;

// 如果验证没有通过，现实错误的提示信息
if (this.hasError) {
// 设置验证后表单项的样式
this.styleItem(item);

// 现实提示信息
this.showTip(item, msg, tipCnt);
}
else {
// 设置验证后表单项的样式
this.styleItem(item);

// 验证通过，隐藏错误提示信息
this.hideTip(item);
}

return this;
},
/**
* 检测上传文件的扩展名
*
* < code >
* < pre >
* Validator.isImage('img/bg.gif');
* // Returns true;
*
* Validator.isImage('img/reg.asp');
* // Returns false;
* </ pre >
* </ code >
*
* @method isImage
* @static
* @param {String} string
* @returns {Boolean}
*/
isImage: function(string){
var filename = string.replace(/.*(\/|\\)/, ""), fileExt = (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()) : '';
if ((fileExt !== 'jpg') && (fileExt !== 'gif') && (fileExt !== 'jpeg') && (fileExt !== 'png') && (fileExt !== 'bmp')) {
return false;
}
return true;
},
/**
* 验证是否为正确的日期格式
*
* < code >
* < pre >
* Validator.isDate('2011-03-24');
* // Return true;
*
* Validator.isDate('good');
* // Return false;
* </ pre >
* </ code >
*
* @method isDate
* @static
* @param {Date|Any} date - 日期、任意值
* @param {Object} reObj - 自定义的日期验证正则表达式
* @param {String} format - 自定义的日期格式
* @return {Boolean}
*/
isDate: function(date, reObj, format){
format = format || 'yyyy-MM-dd';
var input = date,
i,
o = {},
d = new Date();
f1 = format.split(/[^a-z]+/gi),
f2 = input.split(/\D+/g),
f3 = format.split(/[a-z]+/gi),
f4 = input.split(/\d+/g),
len = f1.length,
len1 = f3.length,
reVal = false,
s = function(s1, s2, s3, s4, s5){
s4 = s4 || 60, s5 = s5 || 2;
var reVal = s3;
if (s1 != undefined && s1 != '' || !isNaN(s1)) {
reVal = s1 * 1;
}
if (s2 != undefined && s2 != '' && !isNaN(s2)) {
reVal = s2 * 1;
}
return (reVal == s1 && s1.length != s5 || reVal > s4) ? -10000 : reVal;
};

if (len != f2.length || len1 != f4.length) {
return false;
}

for (i = 0; i < len1 ; i + = 1) {
if (f3[i] ! = f4[i]) {
return false;
}
}

for (i = 0; i < len; i + = 1) {
o[f1[i]] = f2[i];
}

o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);
o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);
o.dd = s(o.dd, o.d, d.getDate(), 31);
o.hh = s(o.hh, o.h, d.getHours(), 24);
o.mm = s(o.mm, o.m, d.getMinutes());
o.ss = s(o.ss, o.s, d.getSeconds());
o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) {
return false;
}

if (o.yyyy < 100) {
o.yyyy + = (o.yyyy > 30 ? 1900 : 2000);
}

d = new Date(o.yyyy, o.MM - 1, o.dd, o.hh, o.mm, o.ss, o.ms);
reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

return reVal && reObj ? d : reVal;
},
/**
* 检测密码的安全级别,并设置相应级别提示的背景图片
*
* < code >
* < pre >
* Validator.checkLevel(document.getElementById('password'), 'security-level');
* </ pre >
* </ code >
*
* @method checkLevel
* @static
* @param {HTMLElement} item
* @param {String} level
*/
checkLevel: function(item, level){
var n = this.getLevel(item), percent = [0, 22, 50, 75, 100], lvlZone = getEl(level);
Y.setStyle(lvlZone, 'backgroundPosition', 'left ' + percent[n] + '%');
},
/**
* 获得密码输入框的密码的安全级别
*
* < code >
* < pre >
* Validator.getLevel(document.getElementById('password'));
* // Returns 0 | 1 | 2 | 3 | 4
* </ pre >
* </ code >
*
* @method getLevel
* @static
* @param {HTMLElement} item
* @param {String} level
* @return {Number}
*/
getLevel : function(item){
var v = item.value, l = v.length, min = 6, level = 0;
if(l < min ){
if (l > 0) {
level = 1;
}
}
else {
if (/^(\d{6,9}|[a-z]{6,9}|[A-Z]{6,9})$/.test(v)) {
level = 1;
}
else {
if (/^[^a-z\d]{6,8}$/i.test(v) || !/^(\d{6,9}|[a-z]{6,9}|[A-Z]{6,9})$/.test(v)) {
level = 2;
}
}
if (!/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\} <> \?\\\/\'\"]*)|.{0,5})$|\s/.test(v)) {
level = l < 10 ? 3 : 4;
}
}
return level;
},
/**
* 自定义的Ajax验证，验证用户名，邮箱，昵称是否存在时可以使用
* @method AjaxValidate
* @static
* @param {Object} option
*/
AjaxValidate: function(option){
var item = this.getItem(option),
AjaxURL = option.action || '',
AjaxParam = option.param || '',
AjaxData = encodeURIComponent(item.value),
AjaxFn = option.AjaxFn || null,
tipCnt = option.tipCnt || null,
that = this;

if (AjaxURL) {
// 如果设置了自定义的Ajax验证方法，执行自定义的Ajax方法
if (isFunction(AjaxFn)) {
AjaxFn(AjaxURL);
}
else {
AjaxURL = AjaxURL + "?" + AjaxParam + " =" + AjaxData;
// 执行 Validator 默认的Ajax验证方法
YUI.AjaxRequest({
url: AjaxURL,
fn: {
success: function(xhr){
var isPass = Y.JSON.parse(xhr.responseText).exist === 'true' ? true : false, msg = '';

if (isPass) {
that.hasError = false;
msg = SUCC;
}
else {
that.hasError = true;
msg = option.error || TIPS[option.param].error;
}

that.styleValidate.call(that, item, msg, tipCnt);
},
loading: function(){
msg = '服务器连接中...';
that.showTip.call(that, item, msg, tipCnt);
},
failure: function(status){
msg = '对不起，服务器忙，请稍后重试！';
that.showTip.call(that, item, msg, tipCnt);
}
}
});
}
}
},
/**
* 获得验证项的DOM节点
*
* @method getItem
* @static
* @param {Object} option
* @return {HTMLElement}
*/
getItem: function(option){
var item = null, id = option.target;

item = getEl(id);

return item;
},
/**
* 获得表单
* @method getForm
* @static
* @return {HTMLElement|Boolean}
*/
getForm: function(){
if(this.form){
return this.form;
}
else{
return false;
}
}
};
})();

页面调用示例代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >




< meta name ="keywords" content ="JavaScript,Validator" />
< meta name ="description" content ="JavaScript,Validator" />
< meta content ="all" name ="robots" />
< title > Validator v1.0 </ title >
< link href ="CSS/validator.CSS" rel ="stylesheet" type ="text/CSS" />
</ head >
< body >
< div id ="container" >
< h1 > Validator v1.0 </ h1 >
< cite class ="article-meta" >< span class ="date" > Mar. < em > 14 </ em > 2011 </ span > by： < a href ="http://www.yaohaixiao.com/" > Yaohaixiao </ a > &nbsp;&nbsp;&nbsp;&nbsp; </ cite >
< div class ="content" >
< form id ="validator-form" method ="get" action ="http://www.yaohaixiao.com/validator/index.html" >
< fieldset class ="field-wrap" >
< legend > Validator v1.0 </ legend >
< div class ="field-item" >< label for ="username" > 注册用户名： </ label >< input id ="username" name ="username" class ="input-item" type ="text" value ="wfsr" maxlength ="20" /></ div >
< div class ="field-item" >< label for ="password" > 登录密码： </ label >< input id ="password" name ="password" class ="input-item" type ="password" maxlength ="20" value ="abcdEfG123" /></ div >
< div class ="field-item" >< label for ="security-level" > &nbsp; </ label >< span id ="security-level" class ="security-level" ></ span ></ div >
< div class ="field-item" >< label for ="confirm-password" > 确认密码： </ label >< input id ="confirm-password" class ="input-item" name ="confirm-password" maxlength ="20" type ="password" value ="abcdEfG123" /></ div >
< div class ="field-item" >< label for ="age" > 年龄： </ label >< input id ="age" name ="age" class ="input-item" type ="text" value ="21" maxlength ="3" /></ div >
< div class ="field-item" >< label for ="birthday" > 生日： </ label >< input id ="birthday" name ="birthday" class ="input-item" type ="text" value ="2005-12-01" maxlength ="10" /></ div >
< div class ="field-item" >< label for ="card-type" > 证件类型： </ label >< select name ="card-type" id ="card-type" >< option value ="1" > 身份证 </ option >< option value ="2" > 军人证 </ option ></ select ></ div >
< div class ="field-item" >< label for ="id-card" > 证件号码： </ label >< input id ="id-card" type ="text" name ="id-card" class ="input-item" value ="" />< span id ="idcard-txt" > 身份证号码如：420105198309113219 </ span ></ div >
< div class ="field-item" >< label for ="email" > 电子邮箱： </ label >< input id ="email" name ="email" type ="text" class ="input-item" value ="abc@msn.com" /></ div >
< div class ="field-item" >< label for ="qq" > QQ： </ label >< input id ="qq" name ="qq" class ="input-item" type ="text" value ="88888" /></ div >
< div class ="field-item" >< label for ="telephone" > 固定电话： </ label >< input id ="telephone" name ="telephone" class ="input-item" type ="text" value ="84611444" maxlength ="8" /></ div >
< div class ="field-item" >< label for ="mobile" > 手机： </ label >< input id ="mobile" name ="mobile" type ="text" class ="input-item" value ="13846114449" maxlength ="11" /></ div >
< div class ="field-item" >< label for ="phone" > 联系电话： </ label >< input id ="phone" name ="phone" type ="text" class ="input-item" value ="13846114449" maxlength ="11" /></ div >
< div class ="field-item" >< label for ="zip-code" > 邮政编码： </ label >< input id ="zip-code" name ="zip-code" class ="input-item" value ="524433" maxlength ="5" /></ div >
< div class ="field-item" >< label for ="ip-address" > 登录IP地址： </ label >< input id ="ip-address" name ="ip-address" class ="input-item" type ="text" value ="192.168.128.254" maxlength ="15" /></ div >
< div class ="field-item" >< label for ="url" > 个人主页： </ label >< input id ="url" name ="url" class ="input-item" type ="text" value ="http://www.yaohaixiao.com/" maxlength ="100" /></ div >
< div class ="field-item" >< label for ="message" > 留言： </ label >< textarea id ="message" class ="msg-box" name ="message" rows ="20" cols ="100" ></ textarea ></ div >
< div class ="field-item center" > 您还可以输入 < em id ="text-counter" > 300 </ em > 个字 </ div >
< div class ="field-item center" >< input name ="btnsubmit" id ="btnsubmit" type ="submit" value =" 确定提交 " /></ div >
</ fieldset >
</ form >
</ div >
</ div >
< script type ="text/JavaScript" src ="js/jQuery.js" ></ script >
< script type ="text/JavaScript" src ="js/jquery.validator.js" ></ script >
< script type ="text/JavaScript" >
var idType = $( ' #card-type ' )[ 0 ],
Validator = jQuery.Validator,
validateSelectWithIdCard = function (){
var val = parseInt(idType.value, 10 ), cardOption = {
" target " : " id-card " ,
" rule " : " idcard " ,
" tipCnt " : " idcard-txt "
}, anyOption = {
" target " : " id-card " ,
" rule " : " require " ,
" tipCnt " : " idcard-txt "
};

switch (val) {
case 1 :
Validator.add(cardOption);
if (Validator.indexOf(Validator.options, anyOption) > - 1 ) {
Validator.remove(anyOption);
}
break ;
case 2 :
Validator.add(anyOption);
if (Validator.indexOf(Validator.options, cardOption) > - 1 ) {
Validator.remove(cardOption);
}

}
};

validateSelectWithIdCard();
$(idType).change( function (){
validateSelectWithIdCard();
});

Validator.setup({
" form " : " validator-form "
}).add({
" target " : " username " ,
" rule " : " username " ,
" fn " : function (){
return true ;
}
}).add({
" target " : " password " ,
" rule " : " password " ,
" plus " : true
}).add({
" target " : " confirm-password " ,
" rule " : " password " ,
" to " : " password "
}).add({
" target " : " age " ,
" rule " : " number "
}).add({
" target " : " age " ,
" rule " : " number "
}).add({
" target " : " birthday " ,
" rule " : " date "
}).add({
" target " : " card-type " ,
" rule " : " require "
}).add({
" target " : " email " ,
" rule " : " email "
}).add({
" target " : " qq " ,
" rule " : " qq "
}).add({
" target " : " telephone " ,
" rule " : " phone "
}).add({
" target " : " mobile " ,
" rule " : " mobile "
}).add({
" target " : " phone " ,
" rule " : " phone||mobile " ,
" tips " : " 请输入您的手机或座机电话号码！ " ,
" warn " : " 您输入的联系电话号码格式不正确！ "
}).add({
" target " : " zip-code " ,
" rule " : " zip "
}).add({
" target " : " ip-address " ,
" rule " : " ip "
}).add({
" target " : " url " ,
" rule " : " url "
}).add({
" target " : " message " ,
" rule " : " require " ,
" plus " : function (){
var cmt = $( ' #message ' )[ 0 ],
counter = $( ' #text-counter ' )[ 0 ],
len = cmt.value.length,
max = 300 ,
val = max - len;

if (val >= 0 ) {
counter.innerHTML = val;
}
else {
cmt.value = cmt.value.substring( 0 , max);
}
}
});
</ script >
</ body >
</ html >

相关内容转载来自于（www.yaohaixiao.com）。

转载于:https://www.cnblogs.com/wangdyy/archive/2011/04/25/2027734.html