jQuery 对自定义属性执行客户端验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4747184/
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
Perform client side validation for custom attribute
提问by raklos
I have created a Custom Validation Attribute:
我创建了一个自定义验证属性：
public class FutureDateAttribute : ValidationAttribute
{
public override bool IsValid(object value)
{
if (value == null|| (DateTime)value < DateTime.Now)
return false;
return true;
}
}
How can I get this to work on client side too with jquery?
如何使用 jquery 使其在客户端也能正常工作？
回答by Darin Dimitrov
Here's how to proceed:
以下是如何进行：
Start by defining the custom validation attribute:
首先定义自定义验证属性：
public class FutureDateAttribute : ValidationAttribute, IClientValidatable
{
public override bool IsValid(object value)
{
if (value == null || (DateTime)value < DateTime.Now)
return false;
return true;
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
yield return new ModelClientValidationRule
{
ErrorMessage = this.ErrorMessage,
ValidationType = "futuredate"
};
}
}
Notice how it implements IClientValidatable. Next we write our model:
注意它是如何实现IClientValidatable 的。接下来我们编写我们的模型：
public class MyViewModel
{
[FutureDate(ErrorMessage = "Should be in the future")]
public DateTime Date { get; set; }
}
Then a controller:
然后是一个控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel
{
// intentionally put in the past
Date = DateTime.Now.AddDays(-1)
});
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return View(model);
}
}
and finally a view:
最后是一个视图：
@using (Html.BeginForm())
{
@Html.LabelFor(x => x.Date)
@Html.TextBoxFor(x => x.Date)
@Html.ValidationMessageFor(x => x.Date)
<input type="submit" value="OK" />
}
The last part for the magic to happen is to define the custom adapter:
魔法发生的最后一部分是定义自定义适配器：
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
// we add a custom jquery validation method
jQuery.validator.addMethod('greaterThan', function (value, element, params) {
if (!/Invalid|NaN/.test(new Date(value))) {
return new Date(value) > new Date($(params).val());
}
return isNaN(value) && isNaN($(params).val()) || (parseFloat(value) > parseFloat($(params).val()));
}, '');
// and an unobtrusive adapter
jQuery.validator.unobtrusive.adapters.add('futuredate', { }, function (options) {
options.rules['greaterThan'] = true;
options.messages['greaterThan'] = options.message;
});
</script>
回答by jwaliszko
It took a little while since your question was asked, but if you still like metadata, and you're still open for simplified alternatives, you can solve your problem using following annotations:
自从提出您的问题以来已经过了一段时间，但是如果您仍然喜欢元数据，并且您仍然对简化的替代方案持开放态度，则可以使用以下注释来解决您的问题：
[Required]
[AssertThat("Date > Now()")]
public DateTime? Date { get; set; }
It works for both - server and client, out of the box. For further details take a look at ExpressiveAnnotationslibrary.
它适用于服务器和客户端，开箱即用。有关更多详细信息，请查看ExpressiveAnnotations库。
