前言
使用$.fn.validatebox.defaults重写默认值对象。下载该插件翻译源码
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。
源码
/*** jQuery EasyUI 1.3.2* *翻译：qq 1364386878*/ (function ($) {//初始化函数function init(jq) {$(jq).addClass("validatebox-text");};//销毁方法function _destroy(jq) {var validatebox = $.data(jq, "validatebox");validatebox.validating = false;var tip = validatebox.tip;if (tip) {tip.remove();}$(jq).unbind();$(jq).remove();};//绑定事件function bindEvents(jq) {var box = $(jq);var validatebox = $.data(jq, "validatebox");//绑定聚焦事件box.unbind(".validatebox").bind("focus.validatebox", function () {validatebox.validating = true;validatebox.value = undefined;(function () {if (validatebox.validating) {if (validatebox.value != box.val()) {validatebox.value = box.val();if (validatebox.timer) {clearTimeout(validatebox.timer);}validatebox.timer = setTimeout(function () {$(jq).validatebox("validate");}, validatebox.options.delay);} else {validate(jq);}setTimeout(arguments.callee, 200);}})();//绑定光标离开事件}).bind("blur.validatebox", function () {if (validatebox.timer) {clearTimeout(validatebox.timer);validatebox.timer = undefined;}validatebox.validating = false;hideTip(jq);//绑定鼠标上去}).bind("mouseenter.validatebox", function () {if (box.hasClass("validatebox-invalid")) {showTip(jq);}//绑定鼠标离开事件}).bind("mouseleave.validatebox", function () {if (!validatebox.validating) {hideTip(jq);}});};//显示提示function showTip(jq) {var message = $.data(jq, "validatebox").message;var tip = $.data(jq, "validatebox").tip;if (!tip) {tip = $("<div class=\"validatebox-tip\">"+ "<span class=\"validatebox-tip-content\">"+ "</span>"+ "<span class=\"validatebox-tip-pointer\">"+ "</span>" + "</div>").appendTo("body");$.data(jq, "validatebox").tip = tip;}tip.find(".validatebox-tip-content").html(message);validate(jq);};//验证function validate(jq) {var validatebox = $.data(jq, "validatebox");if (!validatebox) {return;}var tip = validatebox.tip;if (tip) {var box = $(jq);var tippointer = tip.find(".validatebox-tip-pointer");var tipcontent = tip.find(".validatebox-tip-content");tip.show();tip.css("top", box.offset().top - (tipcontent._outerHeight() - box._outerHeight()) / 2);if (validatebox.options.tipPosition == "left") {tip.css("left", box.offset().left - tip._outerWidth());tip.addClass("validatebox-tip-left");} else {tip.css("left", box.offset().left + box._outerWidth());tip.removeClass("validatebox-tip-left");}tippointer.css("top", (tipcontent._outerHeight() - tippointer._outerHeight()) / 2);}};//隐藏提示function hideTip(jq) {var tip = $.data(jq, "validatebox").tip;if (tip) {tip.remove();$.data(jq, "validatebox").tip = null;}};//验证function _validate(jq) {var validatebox = $.data(jq, "validatebox");var options = validatebox.options;var tip = validatebox.tip;var box = $(jq);var val = box.val();function getmsg(msg) {validatebox.message = msg;};//验证类型function validTypeMd(validType) {var results = /([a-zA-Z_]+)(.*)/.exec(validType);var result = options.rules[results[1]];if (result && val) {var resultsVal = eval(results[2]);if (!result["validator"](val, resultsVal)) {box.addClass("validatebox-invalid");var msg = result["message"];if (resultsVal) {for (var i = 0; i < resultsVal.length; i++) {msg = msg.replace(new RegExp("\\{" + i + "\\}", "g"), resultsVal[i]);}}getmsg(options.invalidMessage || msg);if (validatebox.validating) {showTip(jq);}return false;}}return true;};if (options.required) {if (val == "") {box.addClass("validatebox-invalid");getmsg(options.missingMessage);if (validatebox.validating) {showTip(jq);}return false;}}if (options.validType) {if (typeof options.validType == "string") {if (!validTypeMd(options.validType)) {return false;}} else {for (var i = 0; i < options.validType.length; i++) {if (!validTypeMd(options.validType[i])) {return false;}}}}box.removeClass("validatebox-invalid");hideTip(jq);return true;};//实例化验证框$.fn.validatebox = function (target, parm) {if (typeof target == "string") {return $.fn.validatebox.methods[target](this, parm);}target = target || {};return this.each(function () {var validatebox = $.data(this, "validatebox");if (validatebox) {$.extend(validatebox.options, target);} else {init(this);$.data(this, "validatebox", {options: $.extend({},$.fn.validatebox.defaults,$.fn.validatebox.parseOptions(this), target)});}bindEvents(this);});};//默认方法$.fn.validatebox.methods = {//移除并销毁组件destroy: function (jq) {return jq.each(function () {_destroy(this);});},//验证文本框的内容是否有效validate: function (jq) {return jq.each(function () {_validate(this);});},//调用validate方法并且返回验证结果，true或者falseisValid: function (jq) {return _validate(jq[0]);}};//解析器$.fn.validatebox.parseOptions = function (target) {var t = $(target);return $.extend({}, $.parser.parseOptions(target,["validType","missingMessage","invalidMessage","tipPosition",{ delay: "number" }]),{ required: (t.attr("required") ? true : undefined) });};//默认属性和事件$.fn.validatebox.defaults = {required: false,//定义为必填字段//定义字段验证类型，比如：email, url等等。可用值有：//1).一个有效类型字符串运用一个验证规则。//2).一个有效类型数组运用多个验证规则validType: null,delay: 200,//延迟到最后验证输入值missingMessage: "This field is required.",//当文本框未填写时出现的提示信息invalidMessage: null,//当文本框的内容被验证为无效时出现的提示//定义当文本框内容无效的时候提示消息显示的位置，有效的值有：'left','right'tipPosition: "right",//验证规则 rules: {//匹配E-Mail的正则表达式规则 email: {validator: function (value) {return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);},message: "Please enter a valid email address."},//匹配URL的正则表达式规则 url: {validator: function (value) {return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);},message: "Please enter a valid URL."},//length[0,100]：允许在x到x之间个字符 length: {validator: function (startlength, endlength) {var len = $.trim(startlength).length;return len >= endlength[0] && len <= endlength[1];},message: "Please enter a value between {0} and {1}."},//remote['http://.../action.do','paramName']：发送ajax请求需要验证的值，当成功时返回true remote: {validator: function (_2a, url) {var data = {};data[url[1]] = _2a;var _2d = $.ajax({url: url[0],dataType: "json",data: data,async: false,cache: false,type: "post"}).responseText;return _2d == "true";},message: "Please fix this field."}}}; })(jQuery);
示例代码
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Basic ValidateBox - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery-1.8.0.min.js"></script><script src="../../plugins2/jquery.parser.js"></script><script src="../../plugins2/jquery.validatebox.js"></script> </head> <body><h2>Basic ValidateBox</h2><div class="demo-info"><div class="demo-tip icon-tip"></div><div>It's easy to add validate logic to a input box.</div></div><div style="margin:10px 0;"></div><div class="easyui-panel" title="Register" style="width:400px;padding:10px"><table><tr><td>User Name:</td><td><input class="easyui-validatebox" data-options="required:true,validType:'length[3,10]'"></td></tr><tr><td>Email:</td><td><input class="easyui-validatebox" data-options="required:true,validType:'email'"></td></tr><tr><td>Birthday:</td><td><input class="easyui-datebox"></td></tr><tr><td>URL:</td><td><input class="easyui-validatebox" data-options="required:true,validType:'url'"></td></tr><tr><td>Phone:</td><td><input class="easyui-validatebox" data-options="required:true"></td></tr></table></div></body> </html>
插件效果
