jQuery验证自定义消息

Question

当用户没有填写输入框时，我希望在输入框上显示自定义错误消息。

    <input type="text" class="foo" value="" data-prop="foo" data-rules="{ required: true }"></input>

我该如何给这个特定的输入框添加自定义错误信息？

- Jesse Atkinson

---

类似于 soupenvy 在这里提出的建议 https://dev59.com/U2w15IYBdhLWcg3wLIzI?rq=1 是否可以解决你的问题？ - Benjamin Gruenbaum

@BenjaminGruenbaum 很可能不行。我宁愿避免使用jQuery来覆盖仅一个消息。有没有一种方法可以通过属性来设置这个？ - Jesse Atkinson

Answer 1

使用：

data-msg-required="Please enter something here!"

这是一个演示 HTML 代码：https://github.com/jzaefferer/jquery-validation/blob/master/demo/custom-messages-data-demo.html

JS Fiddle 演示：http://jsfiddle.net/leniel/VuPPy/48/

- Leniel Maccaferri

---

你让我的生活变得轻松。 - San

@San：很高兴能帮到你... :-) - Leniel Maccaferri

我有一个小问题，我的HTML5表单中使用data-rule-range =“[14,30]”表示范围。我正在使用jQuery Step插件的多步骤表单，它使用jQuery Validate。我该如何仅使用字母来使用字段？我可以使用类似data-regex的内容吗？ - San

@San...请提出一个新的问题。这似乎是处理它的更好方式，而不是在评论中进行。 - Leniel Maccaferri

Answer 2

如果您使用jquery-validate.js库（https://jqueryvalidation.org/），您也可以使用js来完成此任务。

看看我的html部分：

<input type="text" id="TBBusquedaDescripcionCategoriaEd" name="TBBusquedaDescripcionCategoriaEd" maxlength="300" class="form-control" required>

然后在js中：

var validator = $("#formName").validate({
        rules: {
            TBBusquedaDescripcionCategoriaEd: {
                required: true,
                minlength: 4
            }
        },
        messages: {
            TBBusquedaDescripcionCategoriaEd: {
                required: "Mandatory field custom msg",
                minlength: "Minleght custom msg"
            }
        },
        submitHandler: function (form) {...});

- Barry