不显眼的验证/jQuery 客户端验证输入的日期是不是超过当前日期

Posted

技术标签:

【中文标题】不显眼的验证/jQuery 客户端验证输入的日期是不是超过当前日期【英文标题】:Unobtrusive validation/jQuery client-side Validate that Date entered is more than the current date不显眼的验证/jQuery 客户端验证输入的日期是否超过当前日期 【发布时间】:2017-12-06 12:05:35 【问题描述】:

我有一个日期字段,我想验证这个日期是否比今天的日期早。

<script>
    jQuery.validator.addMethod("currentdate", function (value, element) 
        return Date.parse(value) > Date.parse(new Date());
    , jQuery.validator.format("Date invalid"));
</script>

    @html.LabelFor(m=>m.booking.Date)
    @Html.TextBoxFor(m => m.booking.Date, new  @class = "form-control", @id="Date" )
    @Html.ValidationMessageFor(m=>m.booking.Date)

采取什么方法?我必须如何构建我的 html 助手?

【问题讨论】:

你有什么问题? 我不知道如何进行此验证。目前,我只是将方法添加到验证器中。 ASP.NET MVC 使用不显眼的验证,因此将您的方法应用于jQuery.validator 是行不通的。您需要使用$.validator.unobtrusive.adapters.add 方法和unobtrusive javascript 库的其他部分。请查看此 URL devtrends.co.uk/blog/…,了解如何实现自定义客户端验证属性。 这对我没有帮助。我不需要使用其他礼仪的验证。我想要一个简单的验证来验证日期是否高于今天的日期 真的很有帮助!谢谢!! 【参考方案1】:

假设下面的表单带有一个名为Date的文本框:

@model TestFormViewModel

@
    ViewBag.Title = "Index";
    HtmlHelper.ClientValidationEnabled = true;
    HtmlHelper.UnobtrusiveJavaScriptEnabled = true;


<h2>Test Form</h2>

@using (Html.BeginForm())

    @Html.TextBoxFor(x => x.Date)
    @Html.ValidationMessageFor(x => x.Date)
    <input type="submit" value="Submit" />


@section scripts   
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/validationrule.js"></script>

简单的控制器动作:

[HttpPost]
public ActionResult Index(TestFormViewModel requestResponsemodel)

    return View(requestResponsemodel);

页面中包含一个名为 validationrule.js 的 JavaScript 文件:

$.validator.unobtrusive.adapters.add("currentdate", [], function (options) 
    options.rules['currentdate'] = options.params;
    if (options.message) 
        options.messages['currentdate'] = options.message;
    
);

$.validator.addMethod("currentdate",
    function (value, element, other) 

        return Date.parse(value) > Date.parse(new Date());
    
);

DateValidationAttribute.cs 包含您的服务器端验证:

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property)]
public class CurrentDateValidationAttribute : ValidationAttribute, IClientValidatable


    // Default error message, can be overridden in the use of the attribute on your model
    public CurrentDateValidationAttribute() : base("The date must be later than the current date.")
    
    

    public override bool IsValid(object value)
    
        var dateToValidate = (DateTime)value;
        return dateToValidate > DateTime.UtcNow;
    

    // Client-Side validation 
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    
        var rule = new ModelClientCurrentDateValidationRule("The date must be later than the current date.");
        yield return rule;
    

... 和一个 ModelClientValidationRule,它将错误消息放入您的 Html 帮助程序 (@Html.TextBoxFor()) 的输出中,以便您的 JavaScript 验证代码在客户端获取:

public class ModelClientCurrentDateValidationRule : ModelClientValidationRule

    public ModelClientCurrentDateValidationRule(string errorMessage)
    
        ErrorMessage = errorMessage;
        ValidationType = "currentdate";
    

要使用分配给模型的自定义验证属性进行验证的模型,在本例中为 Date 属性:

public class TestFormViewModel

    [CurrentDateValidation(ErrorMessage = "The date must be later than the current date.")]
    public DateTime Date  get; set; 

当字段中包含的日期早于当前日期时,您的日期字段将在客户端站点上验证为无效,如下所示:

【讨论】:

只是一个小问题:Date.parse(value) 似乎返回了错误的结果.. 可能是格式问题.. 因为 Date.parse 需要 (MM/DD/YYYY) 日期,但在我的情况下的值是 (DD/MM/YYYY) 日期。 可能不值得我把它放到这个答案中,因为它非常特定于您的实现,但是您可以使用来自 this answer 的 JavaScript 解析 DD/MM/YYYY 格式。让我知道这是否有帮助。 没关系!使用 moment.js 和 var currentdate = moment(value, "DD/MM/YYYY");它有效! 是的,它已经完成了,但我认为我没有任何声誉可以考虑到它。

以上是关于不显眼的验证/jQuery 客户端验证输入的日期是不是超过当前日期的主要内容,如果未能解决你的问题,请参考以下文章

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

jQuery 不显眼的表单验证器在重置表单时不会隐藏错误消息

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

加载时在 iframe 内容中添加客户端不显眼的验证规则

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

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