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

Posted 2023-05-07

【中文标题】自定义 jquery 验证和不显眼的 JavaScript

【英文标题】：custom jquery validation and unobtrusive 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

【参考方案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 BlogASP.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 规则。