ASP.Net MVC:如何使用不显眼的库为我的日期验证添加客户端验证的代码

时间:2016-03-15 12:48:57

标签: asp.net-mvc validation

我有一个要求,因此用户将无法进入过去的日子或过去的日子。如果输入则验证将在服务器端进行,如果日期为旧或返回日期,将向客户端抛出正确的错误消息。

我的服务器端代码如下,但我不知道如何使用不显眼的库验证客户端的日期,如果在后面或旧日期找到日期,则验证日期并停止向服务器提交表单。

我的型号代码

using System.ComponentModel.DataAnnotations;

    public class DateValTest
    {
        [Display(Name = "Date of birth")]
        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
        [MyDate(ErrorMessage = "Back date entry not allowed")]
        public DateTime ? DateOfBirth { get; set; }
    }

我使用名为MyDate的自定义属性,该属性扩展了验证属性类以验证我的日期以限制旧日期或返回日期条目。

MyDate的类代码

public class MyDateAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        DateTime _dateJoin = Convert.ToDateTime(value);
        if (_dateJoin >= DateTime.Now)
        {
            return ValidationResult.Success;
        }
        else
        {
            return new ValidationResult(ErrorMessage);
        }
    }  
}

这是我的样本控制器代码

public class DatValController : Controller
{
    // GET: DatVal
    public ActionResult Index()
    {
        DateValTest d = new DateValTest();
        return View(d);
    }

    [HttpPost]
    public ActionResult Index(DateValTest d)
    {
        //DateValTest d = null;
        if (ModelState.IsValid)
        {
            //d = new DateValTest();
        }
        return View(d);
    }
}

并查看代码

@model AuthTest.Models.DateValTest
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>DateValTest</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

请告诉我在不显眼的js代码中添加什么,因此不会使用旧日期。

2 个答案:

答案 0 :(得分:1)

如果您使用jquery ui来显示日历,您可以将其MinDate属性设置为0,这样用户就无法选择过去的日期,

$('#datepicker').datepicker({ minDate: 0 });

答案 1 :(得分:0)

为了获得客户端验证,您的属性必须实现IClientValidatable,并且您需要包含脚本以将规则添加到$.validator有关实现客户端验证的更多详细信息,请参阅{{ 3}}

您的属性需要

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class TodayOrGreater: ValidationAttribute, IClientValidatable
{
    private const string _DefaultErrorMessage = "The {0} value must be greater than or equal to today's date.";
    private DateTime _MinDate;

    public TodayOrGreater()
    {
        ErrorMessage = _DefaultErrorMessage;
        _MinDate = DateTime.Today;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        ....
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
            ValidationType = "todayorgreater",
        };
        rule.ValidationParameters.Add("mindate", _MinDate);
        yield return rule;
    }
}

和脚本

$.validator.unobtrusive.adapters.add('todayorgreater', ['mindate'], function (options) {
    options.rules['todayorgreater'] = { mindate: options.params.mindate };
    options.messages['todayorgreater'] = options.message;
});

$.validator.addMethod("todayorgreater", function (value, element, param) {
    var date = new Date(value);
    var minDate = new Date(param.mindate);
    return date >= minDate;
});

附注:如果您想要允许今天的日期,则需要if (_dateJoin >= DateTime.Today),而不是if (_dateJoin >= DateTime.Now)。您可能还想要检查null值。