使用 jQuery 验证插件显示自定义元素和内容

Posted

技术标签:

【中文标题】使用 jQuery 验证插件显示自定义元素和内容【英文标题】:Showing custom element and content with jQuery Validation Plugin 【发布时间】:2011-08-12 02:36:47 【问题描述】:

我一直在尝试调整验证器插件以满足我的需求 (http://docs.jquery.com/Plugins/Validation)

当某些内容无效时,插件会显示一条消息。但是,此消息的内容在 js 文件本身内部(我可以通过“消息:”属性更改它)。由于我正在用多种语言构建一个站点,因此我必须有几个 .js 文件,我只需要更改其中的文本。我不想这样做,因为它是可维护性混乱的候选者。

我想要的是,每条规则都将类或 id 作为参数,并在该特定元素中显示错误,这将通过 CSS 隐藏(注意我简化了代码只是为了示例)

<label>Bla:</label>
<input type="text" id="username"/>
<span class="hiddenError" id="requireUser" style="display:none">Write yo name</span>
<span class="hiddenError" id="lengthUser" style="display:none">Write at least 5 characters long</span>

所以,我希望那些 .hiddenError 根据错误显示,而不是在 js(或 html,我不想将初始化放在 HTML 上)中硬编码消息。我不确定,但我认为这与它有关

errorElement: "label",  
errorContainer: $( [] ),  
errorLabelContainer: $( [] ),  

但我无法让它们工作。

有没有办法做到这一点?我尝试修改插件本身,但是处理一千多行代码就像自己编写具有所有这些特性的插件一样困难。

非常感谢您的回答

【问题讨论】:

【参考方案1】:

在我看来,这将是一种糟糕的 i18n 方法,因为它会用许多隐藏元素污染你的 HTML。

最好构造一个对象字面量,将消息名称映射到语言代码。

【讨论】:

以上是关于使用 jQuery 验证插件显示自定义元素和内容的主要内容,如果未能解决你的问题,请参考以下文章

Jquery 插件学习笔记

JQuery——常用插件

jQuery 密码验证和深入理解JSONP前端jQuery框架

我们如何按类指定 jquery 验证插件的规则?

需要自定义使用插件对 URL 进行 JQuery 验证

使用 jQuery 验证插件自定义日期格式