Как запретить пользователю вводить неправильный формат времени (на стороне клиента) - PullRequest
Новая
       35

Как запретить пользователю вводить неправильный формат времени (на стороне клиента)

0 голосов
/ 10 июля 2019

Моя модель включает в себя два свойства, которые содержат время.Я хочу, чтобы пользователь ввел отображаемое время и предотвратил его от неправильных значений, например (07:66), если вы знаете способ в JQuery маскировать его нормально. 

public class WeeklyVW
{
   [StringLength(5)]
 //or time span
    public string Ws_startTime { get; set; }
   [StringLength(5)]
    public string Ws_EndTime { get; set; }
}

в представлении 

@Html.TextBoxFor(m => m.Starthour, new { data_mask = "00:00", @class = "form-control" })

1 Ответ

0 голосов
/ 10 июля 2019

Вы можете достичь своей функциональности, украсив атрибут модели с помощью [DataType(DataType.Time)], а затем отформатировав поле ввода времени в соответствии с вашими потребностями. Второе, что вам нужно, это использовать тег EditorFor вместо TextBoxFor, чтобы это работало. Ваш код будет выглядеть так:

Модель: 

public class WeeklyVW
{
  [StringLength(5)]
  //or time span
  public string Ws_startTime { get; set; }
  [StringLength(5)]
  public string Ws_EndTime { get; set; }

  [Required]
  [DataType(DataType.Time)]
  [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH}")]
  public string Starthour {get;set;}
}

Conntroller: 

public ActionResult Index()
{
    return View(new WeeklyVW());
}

Вид: 

@model HelloWorldMvcApp.WeeklyVW
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <h1>Time Input Example</h1>
    @Html.EditorFor(m => m.Starthour, new { data_mask = "00:00", @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Starthour)    
            </div>
        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

    </body>
</html>

Рабочий пример приложения можно найти по адресу: https://dotnetfiddle.net/6GpRBu Или 

  @Html.TextBoxFor(m => m.EndHour, new { @class = "form-control ", @type = "time" })

если длина равна 5, текстовое поле не может получить больше значений Модель 

  [StringLength(5)]
  public string EndHour{ get; set;}
...