/**
* JQuery 表单验证插件
* FILE: form.validator.js
* USEAGE:
$('#formId').addValidator
(
{
validations:
{
username:
{
vWhen: 'blur,click', // 默认blur，vWhen：'none'则提交前验证，这里表示失去焦点和单击时验证，可选none|blur|click|keyup|keydown
required: [true, '请填写用户名'],
minlength: [8, '至少8个字符'],
maxlength: [40, '不能超过40个字符'],
email: [true, 'EMAIL格式错误'],
regex: [/^[a-zA-Z0-9_]*$/, '用户名只能由数字字母下划线组成'], // 用正则验证
areanum: [true, '区号格式错误'],
tel: [true, '电话号码格式错误'],
mobiletel: [true, '手机号码格式错误'],
cnname: [true, '请填写中文姓名'],
digits: [true, '不是数字'],
url: [true, '不是URL地址'],
equalTo: ['#username2', '两输入不一致'],
remote: ['http://host/ckuser', '用户名已被占用'] // 请求返回1表示验证通过，-1则表示不通过
},
password:
{
required: [false], // 表示非必须，默认非必须
...
}
},
errorShowIn: 'span', // 默认span，可选html标签名
errorClass: 'fv-error', // 默认fv-error
submitBefore: aFunction // 默认null，即只要表单验证通过就提交，不做任何提交前的处理，若不为null并且是函数，那么执行该函数：返回true（提交）或false（不提交）
}
);
* @author tshichun 2010.06.03
*/
(function($) {
$.fn.extend({
/*入口*/
addValidator: function(options) {
// 无或不是表单，直接返回
if (!this.length || !this.is('form')) return;
var validator = $.data(this[0], 'validator');
if (validator) return validator;
validator = new $.Validator(options, this[0]);
$.data(this[0], 'validator', validator);
return validator;
}
});
/*验证器*/
$.Validator = function(options, form) {
this.settings = $.extend({},
$.Validator.defaults, options);
this.form = form;
this.errors = []; // 登记验证不通过的表单元素
this.vElements = []; // 等待验证的元素
this.init();
};
$.extend($.Validator, {
// 静态成员
defaults: {
validations: {},
submitBefore: null,
// 提交表单前要做的事
errorClass: 'fv-error',
errorShowIn: 'span'
},
// 实例成员定义在 prototype 内
prototype: {
// 初始化
init: function() {
var self = this;
$(this.form).submit(function() {
return self.validateForm();
});
self.addValidations();
},
// 通过表单元素名查找元素
getByName: function(name) {
var form = this.form;
var element = $(document.getElementsByName(name)).map(function(index, element) {
return element.form == form && element.name == name && element || null;
});
return (typeof element.length != 'undefined' && element.length == 0) ? null: element[0];
},
// 通过表单元素名取得对应已设置的验证规则
getValidationsByName: function(name) {
return this._contain(name, this.settings.validations);
},
// 给表单元素添加验证规则
addValidations: function() {
var self = this;
$.each(self.settings.validations,
function(key, value) {
var element = self.getByName(key);
if (element == null) {
// 没有对应的表单元素 return:true=continue,false=break
return true;
}
self.vElements.push(element);
// 什么时机验证，默认blur（元素失去焦点）
if (typeof value.vWhen != 'undefined') {
if (value.vWhen != 'none') {
$.each(value.vWhen.split(','),
function(index, type) {
if ($.inArray(type, ['blur', 'click', 'keydown', 'keyup']) == -1) return true;
self.addEvent(type, element, self.validate);
});
} else {
self.addEvent('focus', element, self.cleanErrorMsg);
}
} else {
// 默认情况
self.addEvent('blur', element, self.validate);
self.addEvent('focus', element, self.cleanErrorMsg);
}
});
},
// 添加事件
addEvent: function(type, element, handler) {
var self = this;
$(element).bind(type,
function() {
handler.call(self, element);
});
},
// 取表单元素值
getValue: function(element) {
switch (element.nodeName.toLowerCase()) {
case 'textarea':
return $(element).text();
default:
return $(element).val();
}
},
// 取元素或元素值长度
getLength: function(element) {
switch (element.nodeName.toLowerCase()) {
case 'select':
return $('option:selected', element).length;
case 'input':
if (this.checkable(element)) return this.getByName(element.name).filter(':checked').length;
}
return this.getValue(element).length;
},
// 是否单选或复选按钮
checkable: function(element) {
return /^radio|checkbox$/i.test(element.type);
},
// 是否验证通过
isValid: function() {
return this.errors.length == 0;
},
// 验证表单元素
validate: function(element, ignoreRemote) {
var self = this;
var validations = self.getValidationsByName(element.name);
if (validations != null) {
// 不是必填项时，不填写则忽略该元素的所有验证
if (!self._isRequired(validations) && self.getValue(element) == '') {
return true;
}
// 使用给定的验证规则进行验证
$.each(validations,
function(key, value) {
if (key == 'vWhen' || !value[0]) return true; // 下一个验证
if (typeof ignoreRemote != 'undefined' && ignoreRemote && key == 'remote') return false;
if (!self._validateCall(key, element, value)) {
// 若有一个验证失败，则忽略剩下的验证
self.addErrorElement(element, key);
self.showErrorMsg(element, value[1] || '');
return false;
} else {
if (key != 'remote') self.removeErrorElement(element, key);
}
});
}
},
// 验证表单
validateForm: function() {
if (!this.isValid()) return false;
var elements = this.elements();
for (var i = 0; i < elements.length; i++) {
this.validate(elements[i], true);
}
if (!this.isValid()) return false;
var canSubmit = true;
if (this.settings.submitBefore != null && $.isFunction(this.settings.submitBefore)) {
canSubmit = this.settings.submitBefore();
}
return this.isValid() && canSubmit;
},
// 准备被验证的表单元素
elements: function() {
return this.vElements;
},
// 执行表单元素验证，通过返回true否则false
_validateCall: function(method, element, params) {
return $.isFunction(this.methods[method]) && this.methods[method].call(this, element, params);
},
// 是否包含 required 验证规则，并且 required[0] 为 true
_isRequired: function(validations) {
var contain = this._contain('required', validations);
return contain != null && contain[0];
},
// 是否包含某个键，包含则返回该键对应的值
_contain: function(keyName, inArray) {
var contain = null;
$.each(inArray,
function(key, value) {
if (key == keyName) {
contain = value;
return false;
}
});
return contain;
},
// 清除错误消息
cleanErrorMsg: function(element) {
$(element).next(this.settings.errorShowIn).html('');
},
// 显示错误消息
showErrorMsg: function(element, errorMsg) {
var showInOld = $(element).next(this.settings.errorShowIn);
var showIn = $('<' + this.settings.errorShowIn + '></' + this.settings.errorShowIn + '>').addClass(this.settings.errorClass).html(errorMsg) if (typeof showInOld[0] == 'undefined') showIn.insertAfter($(element));
else showInOld.replaceWith(showIn);
},
// 登记一个未通过验证的元素
addErrorElement: function(element, validateKey) {
if ($.inArray(element.name + '$$' + validateKey, this.errors) == -1) this.errors.push(element.name + '$$' + validateKey);
},
// 取消登记之前未通过验证的元素
removeErrorElement: function(element, validateKey) {
var index = $.inArray(element.name + '$$' + validateKey, this.errors);
if (index >= 0) {
this.errors.splice(index, 1);
this.cleanErrorMsg(element);
}
},
// 内置验证方法
methods: {
// 必须
required: function(element, params) {
switch (element.nodeName.toLowerCase()) {
case 'select':
var options = $('option:selected', element);
return options.length > 0 && (element.type == 'select-multiple' || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text: options[0].value).length > 0)
case 'input':
if (this.checkable(element)) return this.getLength(element) > 0;
default:
return $.trim(this.getValue(element)).length > 0;
}
},
// 最小长度
minlength: function(element, params) {
return this.getLength(element) >= params[0];
},
// 最大长度
maxlength: function(element, params) {
return this.getLength(element) <= params[0];
},
// 是否邮箱
email: function(element, params) {
return /^[A-Z0-9._%+-]+@[A-Z0-9.-]+/. [A - Z] {
2,
4
}
$ / i.test(this.getValue(element));
},
// 正则验证
regex: function(element, params) {
return params[0].test(this.getValue(element));
},
// 中文姓名
cnname: function(element, params) {
return /^[/u4e00 - /u9fa5]{2,10}$/.test(this.getValue(element));
},
// 电话区号
areanum: function(element, params) {
return /^0/d {
2,
3
}
$ / .test(this.getValue(element));
},
// 电话号码
tel: function(element, params) {
return /^/d {
7,
8
}
$ / .test(this.getValue(element));
},
// 移动电话号码
mobiletel: function(element, params) {
return /^0{0,1}(13/d | 15 / d | 18 / d) / d {
8
}
$ / .test(this.getValue(element));
},
// 全是数字
digits: function(element, params) {
return /^/d + $ / .test(this.getValue(element));
},
// URL
url: function(element, params) {
var regex = "^((https|http|ftp|rtsp|mms)?://)";
regex += "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?"; // ftp的user@
regex += "(([0-9]{1,3}/.){3}[0-9]{1,3}|"; // IP形式的URL
regex += "([0-9a-z_!~*'()-]+/.)*"; // 域名
regex += "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]/."; // 二级域名
regex += "[a-z]{2,6})";
regex += "(:[0-9]{1,4})?"; // 端口
regex += "((/?)|";
regex += "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
return new RegExp(regex, 'i').test(this.getValue(element));
},
// 两个元素值比较
equalTo: function(element, params) {
return this.getValue(element) == $(params[0]).val();
},
// 远程服务器验证
remote: function(element, params) {
var isDone = false;
var self = this;
var datas = {}
datas[element.name] = self.getValue(element);
$.get(params[0], datas,
function(data) {
isDone = true;
if (data == -1) {
// 验证不通过
self.addErrorElement(element, 'remote');
self.showErrorMsg(element, params[1] || '');
} else {
// 验证通过
self.removeErrorElement(element, 'remote');
}
});
if (!isDone) return true;
else return ! $.inArray(element.name, self.errors);
}
}
}
});
})(jQuery);
扫一扫
06-18
1794
1794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
