自定义 jquery 验证和不显眼的 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5425783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
custom jquery validation and unobtrusive JavaScript
提问by raklos
I'm trying to write a custom validation that gives an error if html exists in the textarea when they submit a form.
我正在尝试编写一个自定义验证，如果在提交表单时 textarea 中存在 html，则会出现错误。
I have the following - its not working and I'm not sure why.
我有以下情况 - 它不起作用，我不知道为什么。
also I don't understand the unobtrusive part can someone show me how to do that as I am seeing other examples on SO that have it.
我也不明白不显眼的部分，有人可以告诉我如何做到这一点，因为我在 SO 上看到了其他例子。
text area has a class"note" the form is called "noteform"
文本区域有一个“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>
回答by MHollis
There's a couple issues here. One is you're trying to mix unobtrusive and regular jquery validation. If you want to use validate like this then you need to make sure jquery.validate.unobtrusive.jsis NOT included. This is because jquery.validate.unobtrusive.jsautomatically parses and produces a validator for the document and the very first thing that validatedoes is check if there's an existing validator and exits if there is.
这里有几个问题。一个是你试图混合不显眼的和常规的 jquery 验证。如果您想像这样使用验证，那么您需要确保jquery.validate.unobtrusive.js不包括在内。这是因为jquery.validate.unobtrusive.js自动解析并为文档生成验证器，并且首先validate检查是否存在验证器，如果存在则退出。
If you do decide to go the non-unobtrusive route, be sure not to use the $.validator.unobtrusive.adapters.addsince it will cause an error without jquery.validate.unobtrusive.js.
如果您确实决定走不显眼的路线，请确保不要使用 ，$.validator.unobtrusive.adapters.add因为如果没有jquery.validate.unobtrusive.js.
I would recommend going with unobtrusive validation though since I think you're using MVC3.
If you're going to go with unobtrusive validation you have two choices, set the data-* attributes yourself by adding data-val="true" data-val-nohtml="Html not allowed"to your textarea as suggested by JohnnyO and including a span with data-valmsg-for="note" data-valmsg-replace="true"to show the error message. Or you can make your own DataAnnotation attribute.
我建议使用不显眼的验证，因为我认为您正在使用 MVC3。如果您打算进行不显眼的验证，您有两种选择，data-val="true" data-val-nohtml="Html not allowed"通过按照 JohnnyO 的建议添加到您的文本区域并包括一个data-valmsg-for="note" data-valmsg-replace="true"显示错误消息的跨度来自行设置 data-* 属性。或者您可以创建自己的 DataAnnotation 属性。
Here's the code for the addMethod (needed for both kinds of validation)
这是 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>
and the javascript needed for the unobtrusive is as follows
和不显眼所需的javascript如下
$.validator.unobtrusive.adapters.addBool('nohtml');
Regarding how to make a custom validation attribute, since I'm not sure what language you're using, assuming you're using MVC3, or if you even need this info anymore 4 months after you asked, I'm going to simply leave these links for reference.
关于如何创建自定义验证属性，因为我不确定您使用的是什么语言，假设您使用的是 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
MVC 3 中传统与非侵入式 JavaScript 验证的简要比较 - Mitchell Trent 的博客
ASP.NET MVC 3 自定义验证 - Microsoft Developer Network
回答by Johnny Oshika
Although I haven't tested this, I think all you're missing is to wire up the element that you want to validate with the nohtml rule. Something like this:
虽然我还没有测试过这个，但我认为你所缺少的只是用 nohtml 规则连接你想要验证的元素。像这样的东西：
$('textarea.note').rules('add', {
nothml: true
});
Based on some of your description, I assume you're using ASP.NET MVC3. In that case, you would only need to use the unobtrusive adapter if you're generating the validation attributes server side on your html element (e.g. <textarea data-val="true" data-val-nohtml="Html not allowed"></textarea>). In such a case, you'll need the unobtrusive adapter to wire up the element to use your nohtml rule.
根据您的一些描述，我假设您使用的是 ASP.NET MVC3。在这种情况下，如果您在 html 元素（例如<textarea data-val="true" data-val-nohtml="Html not allowed"></textarea>）上生成验证属性服务器端，则只需要使用不显眼的适配器。在这种情况下，您将需要不显眼的适配器来连接元素以使用您的 nohtml 规则。
