前言

使用$.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等等?？捎弥涤?#xff1a;//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); View Code

?

示例代碼

?

<!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> View Code

?

插件效果

轉載于:https://www.cnblogs.com/DemoLee/p/3501115.html

總結

以上是生活随笔為你收集整理的easyui源码翻译1.32--ValidateBox（验证框）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。