Проверка JQuery позволяет номера для «data-val-date» / MVC

Question

У меня включена проверка на стороне клиента с jquery.validate.js и jquery.unobtrusive.ajax.js, указанными на моей странице. Я использую @Html.TextBoxFor() для создания входных данных в форме.

Проверка на стороне клиента работает правильно, за исключением дат.

Если я пытаюсь ввести письмо, я получаю ошибку на стороне клиента, и это здорово.

Если я ввожу явно недействительную дату, такую ​​как 02/77/2018, я получаю ошибку на стороне клиента точно так же, как ожидалось / желательно, как и любой другой тип, который не проходит проверку.

Однако, если я введу только целое число для даты (например, 111), она пройдет проверку. Кто-нибудь знает почему?

К счастью, он не проходит мою проверку на стороне сервера в контроллере, но все остальные мои проверки выполняются на стороне клиента, и я хотел бы, чтобы все было согласованно. Я мог бы написать собственный код для проверки формата даты, но, похоже, должен быть более простой способ убедиться, что ввод выполняется в формате MM/dd/yyyy или MM-dd-yyyy.

Чтобы воспроизвести проблему, обратитесь к this DotNetFiddle

1. Ввести A в текстовое поле и выйти - сообщение об ошибке отображается
2. Ввести 111 в текстовое поле и выйти - сообщение об ошибке исчезнет
3. Ввести 11112018 в текстовое поле и выйти - сообщение об ошибке появляется снова
4. Введите 111 снова и сообщение об ошибке исчезнет
5. Нажмите сохранить - форма отправлена, и на сервере появится сообщение об ошибке

Answer 1

Вы можете использовать регулярное выражение для проверки ввода по вашему регулярному выражению.
Это просто простое регулярное выражение, но вы можете создать сложное, если хотите!
Небо это предел

public class SampleViewModel
{
    [RegularExpression(@"^.*\d{1,2}\/\d{1,2}\/\d{4}$", ErrorMessage = "Only mm/dd/yyyy is allowed!")]
    public DateTime Date { get; set; }

}

Answer 2

Плагин jquery.validate.js проверяет даты, вызывая new Date(value);

Фактическая функция

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function( value, element ) {
    return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
},

Возвращает ли это значение true, также зависит от используемого вами браузера.

Например, в Chrome

new Date('aaa') // returns Invalid Date
new Date('111') // return Thu Jan 01 0111 00:00:00 GMT+1030 (Cen. Australia Daylight Time)
new Date('11112018') // returns Invalid Date

в FireFox / Edge

new Date('aaa') // returns Invalid Date
new Date('111') // returns Invalid Date
new Date('11112018') // returns Invalid Date

Еще более запутанным является то, что если вы введете new Date('02/77/2018') в Chrome, вы получите Invalid Date, но в FireFox и Edge он вернет дату (но не дату, которую вы ввели)

В качестве примечания я поднял эту проблему на GitHub, но она была отклонена. Обратите внимание, что комментарий относительно date будет устаревшим в пользу dateISO, но он не был включен в jquery.validate.unobtrusive.js.

Этот ответ включает скрипт, который можно использовать для правильной проверки на стороне клиента для всех браузеров.