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

(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
+ '%');
},
/**
* 获得密码输入框的密码的安全级别
*
* <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;
}
}
};
})();

(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
+ '%');
},
/**
* 获得密码输入框的密码的安全级别
*
* <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>    </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"> </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>