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

Posted

技术标签:

【中文标题】自定义 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 元素上生成验证属性服务器端(例如&lt;textarea data-val="true" data-val-nohtml="Html not allowed"&gt;&lt;/textarea&gt;),则只需要使用不显眼的适配器。在这种情况下,您将需要不显眼的适配器来连接元素以使用您的 nohtml 规则。

【讨论】:

以上是关于自定义 jquery 验证和不显眼的 JavaScript的主要内容,如果未能解决你的问题,请参考以下文章

Jquery post和不显眼的ajax验证不起作用mvc 4

如何在 ASP NET MVC 中自定义不显眼的验证 JQuery 消息?

PartialView 和不显眼的客户端验证不起作用

自定义不显眼的验证方法未按照文档触发

ASP .Net MVC 3:自定义不显眼的验证

自定义格式日期的 MVC3 不显眼日期验证