如何自定义jquery验证引擎消息错误

我正在尝试使用validationEngine插件生成自定义错误消息

默认情况下，当您使用如下内容时：

<input value="" class="validate[required]" type="text" name="name" id="name"/>

---

任何帮助都将不胜感激，我已经有几天的时间来完成这项工作

您只需修改jquery.validationEngine-en.js中的消息（如果不是英语，也可以修改任何语言）。请记住，您更改的验证类型的所有字段都将显示相同的消息

这也是您可以添加自己的自定义验证和消息的地方

\编辑-啊，我明白你的意思。好吧，我不能因此而获得任何荣誉，但是一家叫做的公司使用字段的title属性为相同的问题提出了一个解决方案

它们覆盖validationengine中的buildprompt函数，并添加了拾取自定义错误消息的功能

下面是他们的代码：

var buildPrompt = $.validationEngine.buildPrompt;
$.validationEngine.buildPrompt = function(caller, promptText, type, ajaxed) {
  // Get the rules to map the message for a method
  var rulesRegExp = /\[(.*)\]/;
  var getRules = rulesRegExp.exec($(caller).attr('class'));
  var str = getRules[1];
  var pattern = /\[|,|\]/;
  var rules = str.split(pattern);
  //Check if title attribute present in the element
  //otherwise we shall use default error message
  if ($(caller).attr('title')) {
    var getMessages = rulesRegExp.exec($(caller).attr('title'));
    var str = getMessages[1];
    var pattern = /\[|,|\]/;
    var messages = str.split(pattern);

    var j = 0;
    newPrompt = "";
    for ( var i = 0; i < rules.length; i++) {
     rules = $.validationEngine.settings.allrules[rules[i]]
      if (rules) {
        if (promptText.indexOf(rules.alertText) != -1) {

          newPrompt += "
<p class="errorMsg">" + messages[j] + "

";

        }
        j++;
      }
    }
    promptText = newPrompt;
  }

  buildPrompt(caller, promptText, type, ajaxed);
}
</p>

var buildPrompt=$.validationEngine.buildPrompt；
$.validationEngine.buildPrompt=函数（调用者、PrompText、类型、ajaxed）{
//获取映射方法消息的规则
变量规则regexp=/\[（.*）\]/；
var getRules=rulesRegExp.exec（$（调用者）.attr（'class'）；
var str=getRules[1]；
变量模式=/\[\]，\]/；
var规则=str.split（模式）；
//检查元素中是否存在title属性
//否则，我们将使用默认错误消息
if（$（调用者）.attr（'title'））{
var getMessages=rulesRegExp.exec（$（调用者）.attr（'title'）；
var str=getMessages[1]；
变量模式=/\[\]，\]/；
var messages=str.split（模式）；
var j=0；
newPrompt=“”；
对于（var i=0；i“+消息[j]+”
";
}
j++；
}
}
PrompText=newPrompt；
}
buildPrompt（调用者、promptext、type、ajaxed）；
}

他们在“title”属性中添加了错误消息，这使得为不同字段定制错误消息具有灵活性。下面是可以添加自定义错误消息的示例：

<input value="" class="validate[required,custom[noSpecialCaracters],length[0,20]]" name="user" id="user" title="[* Desired username is required,* No special caracters allowed for  Desired username,* Desired username should have characters between 0 and 20]" type="text">

---

我希望这能解决您的问题。

您可以设置自己的自定义错误消息。在这个脚本中，“required”已经开始工作了，现在我们将创建一个新规则“required_2”。 步骤1：在jquery.validationEngine.js文件中创建一个新案例 像

case "required_2":
required = true;
errorMsg = methods._required(field, rules, i, options);
break;

为所需的_2添加添加功能

_required_2: function(field, rules, i, options) {
            switch (field.prop("type")) {
                case "text":
                case "password":
                case "textarea":
                case "file":
                default:
                    if (!($.trim(field.val())))
                        return options.allrules[rules[i]].alertText;
                    break;
                case "radio":
                case "checkbox":
                    var form = field.closest("form");
                    var name = field.attr("name");
                    if (form.find("input[name='" + name + "']:checked").size() == 0) {
                        if (form.find("input[name='" + name + "']").size() == 1)
                            return options.allrules[rules[i]].alertTextCheckboxe;
                        else
                            return options.allrules[rules[i]].alertTextCheckboxMultiple;
                    }
                    break;
                // required for <select>
                case "select-one":
                    // added by paul@kinetek.net for select boxes, Thank you
                    if (!field.val())
                        return options.allrules[rules[i]].alertText;
                    break;
                case "select-multiple":
                    // added by paul@kinetek.net for select boxes, Thank you
                    if (!field.find("option:selected").val())
                        return options.allrules[rules[i]].alertText;
            }
        }

步骤：3现在几乎完成了，您可以在html字段中使用它

<input value="" class="validate[required_2] text-input" type="text" name="req1" id="req1" data-prompt-position="topRight:-70" />

---

**试试这个。。适用于我：）如果使用jquery.validationEngine.js中的以下代码设置标题，则修改promtText

if（field.attr（“title”）！=null） PrompText=field.attr（“标题”）

***

/**
*为给定字段生成并着色提示。
*
*@param{jqObject}字段
*@param{String}promptext要显示的html文本类型
*@param{String}键入气泡的类型：“通过”（绿色）、“加载”（黑色）任何其他内容（红色）
*@param{boolean}ajaxed-用于标记未通过ajax验证的字段
*@param{Map}options用户选项
*/
_buildPrompt：函数（字段、PrompText、类型、ajaxed、选项）{
//创建提示
变量提示=$（''）；
prompt.addClass（方法._getClassName（field.attr（“id”））+“formError”）；
//添加类名以标识提示的父窗体
如果（字段为（“：输入”））
prompt.addClass（“parentForm”+方法._getClassName（field.parents（'form'）.attr（“id”））；
prompt.addClass（“formError”）；
开关（类型）{
案例“通行证”：
prompt.addClass（“绿色弹出”）；
打破
案例“荷载”：
prompt.addClass（“blackPopup”）；
打破
违约：
/*它有错误*/
//警报（“未知弹出类型：+类型”）；
}
如果（ajaxed）
prompt.addClass（“ajaxed”）；
//创建提示内容
if（field.attr（“title”）！=null）
PrompText=field.attr（“标题”）；
var promptContent=$（''）.addClass（“formErrorContent”）.html（promptText）.appendTo（prompt）；
//创建指向该字段的css箭头
//请注意，max复选框和radio上没有三角形
如果（选项。显示箭头）{
var arrow=$（''）.addClass（“formErrorArrow”）；
//提示定位调整支持。用途：位置类型：Xshift、Yshift（例如：左下+20或左下：-20、+10）
变量位置类型=field.data（“promptPosition”）| | options.promptPosition；
if（typeof（positionType）==“string”）{
var pos=positionType.indexOf（“：”）；
如果（位置！=-1）
位置类型=位置类型。子字符串（0，位置）；
}
开关（位置型）{
案例“左下角”：
案例“右下角”：
prompt.find（“.formErrorContent”）。在（箭头）之前；
addClass（“formErrorArrowBottom”）.html（“”）；
打破
案例“左上”：
案例“topRight”：
html（“”）；
prompt.append（箭头）；
打破
}
}
//修改jqueryui的z索引
if（field.closest（'.ui对话框'）.length）
prompt.addClass（'formErrorInsideDialog'）；
prompt.css({
“不透明度”：0，
“位置”：“绝对”
});
字段前（提示）；
var pos=方法。\u计算位置（字段、提示、选项）；
prompt.css({
“top”：调用方的位置，
“左”：主叫位置
"required_2": { // Add your regex rules here, you can take telephone as an example
                    "regex": "none",
                    "alertText": "* This field is required by mohan",
                    "alertTextCheckboxMultiple": "* Please select an option",
                    "alertTextCheckboxe": "* This checkbox is required",
                    "alertTextDateRange": "* Both date range fields are required"
                },

<input value="" class="validate[required_2] text-input" type="text" name="req1" id="req1" data-prompt-position="topRight:-70" />

        /**
     * Builds and shades a prompt for the given field.
     *
     * @param {jqObject} field
     * @param {String} promptText html text to display type
     * @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)
     * @param {boolean} ajaxed - use to mark fields than being validated with ajax
     * @param {Map} options user options
     */
     _buildPrompt: function (field, promptText, type, ajaxed, options) {

         // create the prompt
         var prompt = $('<div>');
         prompt.addClass(methods._getClassName(field.attr("id")) + "formError");
         // add a class name to identify the parent form of the prompt
         if (field.is(":input"))
             prompt.addClass("parentForm" + methods._getClassName(field.parents('form').attr("id")));
         prompt.addClass("formError");

         switch (type) {
             case "pass":
                 prompt.addClass("greenPopup");
                 break;
             case "load":
                 prompt.addClass("blackPopup");
                 break;
             default:
                 /* it has error  */
                 //alert("unknown popup type:"+type);
         }
         if (ajaxed)
             prompt.addClass("ajaxed");

         // create the prompt content
         if (field.attr("title") != null)
            promptText = field.attr("title");
         var promptContent = $('<div>').addClass("formErrorContent").html(promptText).appendTo(prompt);


         // create the css arrow pointing at the field
         // note that there is no triangle on max-checkbox and radio
         if (options.showArrow) {
             var arrow = $('<div>').addClass("formErrorArrow");

             //prompt positioning adjustment support. Usage: positionType:Xshift,Yshift (for ex.: bottomLeft:+20 or bottomLeft:-20,+10)
             var positionType = field.data("promptPosition") || options.promptPosition;
             if (typeof (positionType) == 'string') {
                 var pos = positionType.indexOf(":");
                 if (pos != -1)
                     positionType = positionType.substring(0, pos);
             }

             switch (positionType) {
                 case "bottomLeft":
                 case "bottomRight":
                     prompt.find(".formErrorContent").before(arrow);
                     arrow.addClass("formErrorArrowBottom").html('<div class="line1"><!-- --></div><div class="line2"><!-- --></div><div class="line3"><!-- --></div><div class="line4"><!-- --></div><div class="line5"><!-- --></div><div class="line6"><!-- --></div><div class="line7"><!-- --></div><div class="line8"><!-- --></div><div class="line9"><!-- --></div><div class="line10"><!-- --></div>');
                     break;
                 case "topLeft":
                 case "topRight":
                     arrow.html('<div class="line10"><!-- --></div><div class="line9"><!-- --></div><div class="line8"><!-- --></div><div class="line7"><!-- --></div><div class="line6"><!-- --></div><div class="line5"><!-- --></div><div class="line4"><!-- --></div><div class="line3"><!-- --></div><div class="line2"><!-- --></div><div class="line1"><!-- --></div>');
                     prompt.append(arrow);
                     break;
             }
         }
         // Modify z-indexes  for jquery ui
         if (field.closest('.ui-dialog').length)
             prompt.addClass('formErrorInsideDialog');

         prompt.css({
             "opacity": 0,
             'position': 'absolute'
         });
         field.before(prompt);

         var pos = methods._calculatePosition(field, prompt, options);
         prompt.css({
             "top": pos.callerTopPosition,
             "left": pos.callerleftPosition,
             "marginTop": pos.marginTopSize,
             "opacity": 0
         }).data("callerField", field);

         if (options.autoHidePrompt) {
             setTimeout(function () {
                 prompt.animate({
                     "opacity": 0
                 }, function () {
                     prompt.closest('.formErrorOuter').remove();
                     prompt.remove();
                 });
             }, options.autoHideDelay);
         }
         return prompt.animate({
             "opacity": 0.87
         });
     },
     /**
     * Updates the prompt text field - the field for which the prompt
     * @param {jqObject} field
     * @param {String} promptText html text to display type
     * @param {String} type the type of bubble: 'pass' (green), 'load' (black) anything else (red)
     * @param {boolean} ajaxed - use to mark fields than being validated with ajax
     * @param {Map} options user options
     */
     _updatePrompt: function (field, prompt, promptText, type, ajaxed, options, noAnimation) {

         if (prompt) {
             if (typeof type !== "undefined") {
                 if (type == "pass")
                     prompt.addClass("greenPopup");
                 else
                     prompt.removeClass("greenPopup");

                 if (type == "load")
                     prompt.addClass("blackPopup");
                 else
                     prompt.removeClass("blackPopup");
             }
             if (ajaxed)
                 prompt.addClass("ajaxed");
             else
                 prompt.removeClass("ajaxed");

             if (field.attr("title") != null)
                 promptText = field.attr("title");
             prompt.find(".formErrorContent").html(promptText);

             var pos = methods._calculatePosition(field, prompt, options);
             var css = { "top": pos.callerTopPosition,
                 "left": pos.callerleftPosition,
                 "marginTop": pos.marginTopSize
             };

             if (noAnimation)
                 prompt.css(css);
             else
                 prompt.animate(css);
         }
     },

jQuery('#fieldId').validationEngine('showPrompt', 'This a custom msg', 'error', true)