自定义 jquery 验证和不显眼的 JavaScript答案

【问题标题】：custom jquery validation and unobtrusive JavaScript自定义 jquery 验证和不显眼的 JavaScript
【发布时间】：2011-07-22 11:58:21
【问题描述】：

我正在尝试编写一个自定义验证，如果在提交表单时文本区域中存在 html，则会给出错误。

我有以下 - 它不工作，我不知道为什么。

我也不明白不引人注目的部分有人可以告诉我如何做到这一点，因为我在 SO 上看到其他示例。

文本区域有一个类“note” 该表格称为“noteform”

  <script type="text/javascript" >
        $(document).ready(function () {


        $.validator.addMethod('nohtml', function (value, element) {
            var text = $(".note").text();
            if ($(text).length > 0) {
                return false;
            }
            else {
                return true;
            }
        }, 'Html not allowed');

    //    // **not sure what to do here**
    //    $.validator.unobtrusive.adapters.add('containsnohtml', {}, function (options) {
    //        options.rules['nohtml'] = false;
    //        options.messages['nohtml'] = options.message;
    //    });

        $('#noteform').validate({
            rules: { nohtml: "required nohtml" }
        });

    });

</script>

【问题讨论】：

您是否在使用某种验证插件或类似的东西？
我正在使用 jquery.validate.min.js

标签： javascript jquery validation jquery-validate

【解决方案1】：

这里有几个问题。一种是你试图混合不显眼的和常规的 jquery 验证。如果您想像这样使用验证，则需要确保不包括 jquery.validate.unobtrusive.js。这是因为jquery.validate.unobtrusive.js 自动解析并为文档生成一个验证器，validate 做的第一件事就是检查是否存在验证器，如果存在则退出。

如果您决定采用不显眼的方式，请确保不要使用$.validator.unobtrusive.adapters.add，因为没有jquery.validate.unobtrusive.js 会导致错误。

我建议您使用不显眼的验证，因为我认为您使用的是 MVC3。如果您要进行不显眼的验证，您有两个选择，请按照 JohnnyO 的建议，通过将 data-val="true" data-val-nohtml="Html not allowed" 添加到您的 textarea 并包含带有 data-valmsg-for="note" data-valmsg-replace="true" 的跨度来自己设置 data-* 属性以显示错误消息。或者您可以制作自己的 DataAnnotation 属性。

这是 addMethod 的代码（两种验证都需要）

 <script type="text/javascript">
     (function ($) {
            $.validator.addMethod('nohtml', function (value, element) {
                // Test 'value' for html here. 'value' is the value of the control being validated.
                return true; // Return true or false depending on if it passes or fails validation, respectively.
            }, 'Html not allowed');

        } (jQuery));
    </script>

不显眼所需的javascript如下

$.validator.unobtrusive.adapters.addBool('nohtml');

关于如何制作自定义验证属性，因为我不确定您使用的是什么语言，假设您使用的是 MVC3，或者在您询问 4 个月后您是否还需要此信息，我要去留下这些链接以供参考。

A brief comparision of Traditional vs Unobtrusive JavaScript Validation in MVC 3 - Mitchell Trent's Blog
ASP.NET MVC 3 Custom Validation - Microsoft Developer Network

【讨论】：

【解决方案2】：

虽然我没有对此进行测试，但我认为您所缺少的只是将您想要使用 nohtml 规则验证的元素连接起来。像这样的：

$('textarea.note').rules('add', {
  nothml: true
});

根据您的一些描述，我假设您使用的是 ASP.NET MVC3。在这种情况下，如果您在 html 元素上生成验证属性服务器端（例如<textarea data-val="true" data-val-nohtml="Html not allowed"></textarea>），则只需要使用不显眼的适配器。在这种情况下，您将需要不显眼的适配器来连接元素以使用您的 nohtml 规则。

【讨论】：