/** * 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=breakreturn 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));},// URLurl: 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形式的URLregex += "([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);
