Question

在我的视图模型中，我设置了一个具有此属性的字段。

如果用户以正确的格式输入日期和时间，则一切正常。

如果用户未以正确的格式插入DateTime，则会出现错误。

我想在客户端进行验证。

你能告诉我怎么做吗？

   [Required]
    [Display(Name = "Start DateTime")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy HH:mm}")]
    public System.DateTime DateTimeStart { get; set; }

Answer 1

从DateTime类型的属性获取格式异常是非常烦人的问题。在DateTime上进行验证时，这是一个相当常见的问题。

DataAnnotaions适用于服务器端，为了充分利用您需要在控制器中添加ModelState.IsValid()。

public ActionResult Index(MyViewModel model)
{
    if(ModelState.IsValid())
    {
       // valid data received...
    }
    else
    {
       // Invalid data, add model error here and return view...
    }
}

如果您要在客户端上完成这些工作，那么您需要在代码中加入另外两个JavaScript文件，即jquery.validate.js和jquery.validate.unobtrusive.js以及{ {1}}核心库。默认情况下，所有这些文件都在基本的MVC项目中，并包含在jQuery。

中

请务必注意包含这些文件的顺序。 Layout核心应始终位于顶部，然后是验证库。

的的jquery.js

的 jquery.validate.js

的 jquery.validate.unobtrusive.js

确保在jQuery文件中打开验证标记 MVC项目。转到此文件并找到以下内容并进行设置 web.config如果它们是假的。

true

这应该设置您的验证在客户端工作。您可以使用RegularExpression装饰模型属性。

<appSettings> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings>

这将以[Required] [RegularExpression("^(([0-2]?[0-9]|3[0-1])/([0]?[1-9]|1[0-2])/[1-2]\d{3}) (20|21|22|23|[0-1]?\d{1}):([0-5]?\d{1})$", ErrorMessage = "Invalid date")] public string DateTimeStart { get; set; }格式验证datetime。

除此之外，您还可以将属性设为dd-mm-yyyy hh:mm类型，因为正则表达式会处理您的日期格式。

除此之外，您还可以 create your custom DataAnnotation.

Answer 2

首先，您使用什么来允许用户输入日期？

如果您使用Jquery DatePicker，请参阅this example，用户无法以错误的格式输入日期（检查元素和更改文本框值除外，可以忽略该值）。

使用Jquery Datepicker的示例代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>


</body>
</html>

并且你没有使用DatePicker我强烈建议你使用它。

如果你是datepicker的新手，你可以通过以下列出的文章开始：

MVC如何验证DateTime字段以及客户端验证

2 个答案: