Проверка модели/формы с использованием аннотаций данных и JavaScript

Question

Я хотел бы реализовать проверку данных в моем приложении ASP MVC. Я в настоящее время с помощью аннотаций данных, как это:

[Required] 
public string UserName { get; set; } 

Что бы тогда превратиться в нечто вроде

<input type='text' ... data-required> 

я могу проверить это нормально с помощью Jquery ненавязчивых проверок, однако этот проект не имеет JQuery. Он построен прямо из Javascript, и мы планируем сохранить его таким образом.

Есть ли способ, которым я могу это сделать без jQuery?

Answer 1

Итак, согласно комментарию, существуют библиотеки, которые реализуют проверку модели в Javascript. Я написал один, Egkyron, и использовал его в своей работе. В этих библиотеках вы определяете правила проверки для модели, а не пользовательского интерфейса, как и на стороне сервера.

Предположим User модели, определенной в JS, как:

function User() { 
    this.userName = null; 
    this.password = null; 
    this.passwordVerification = null; 
} 

Вы можете определить свои правила валидации как эквивалент JS аннотаций:

User.validators = { 
    // key is property name from the object; value is the validation rules 
    userName: [ 
    // the userName is required... 
    'required', 
    // ...and some arbitrary rules for demonstrating: 
    // "the user name starts with a lower-case letter and consists only of lower-case letters and numbers" 
    ['regexp', {re: /^[a-z][a-z0-9]*$/}], 
    // "the length of the user name is between 5 and 8 characters (inclusive)" 
    ['length', {min: 5, max: 8}] 
    ] 
}; 

При использовании Бабеля или машинопись, вы можете проверить декораторы, предложение по спецификации ES7. Класс TS может быть аннотированный как:

class User { 
    @Required() 
    @RegExp(/^[a-z][a-z0-9]*$/) 
    @Length({min: 5, max: 8}) 
    userName: string; 
    ... 
} 

Это очень близко к тому, что вы пишете на стороне сервера с Java или C#. Фактически, в предыдущем проекте мы генерировали классы JS + правила проверки с серверных классов C#.

Тогда, если вы разжиться User объекта, вы можете проверить его с Egkyron как:

var validator = new egkyron.Validator(/* see the example for constructor arguments */); 
var user = ...; // instance of a User 
var validationResult = validator.validate(user).result; 

Валидатор является многоразовым; если user = new User() ValidationResult выглядит следующим образом:

{ // validation result for the given User 
    _thisValid: true, // no validation rules of **this** object failed 
    _validity: null, // there are no validation rules for this object (only for its properties) 
    _childrenValid: false, // its properties and/or children objects are invalid 
    _children: {  // detailed report of its children objects/properties 
     userName: { // child property name 
      _thisValid: false, // the userName is invalid (required but not given) 
      _children: null, // terminal node, no children 
      _validity: { // detailed report about each validation rule 
       required: { isValid: false, ... }, // the "required" constraint failed 
       regexp: { isValid: true, ... }, // empty value => regexp validity defaults to true 
       length: { isValid: true, ... }  // empty value => length validity defaults to true 
      } 
     }, 
     ... 
    } 
} 

Получив результат проверки, вы, вероятно, хотите, чтобы представить его в пользовательский интерфейс. Есть мириады разных требований и крошечные вариации на них. Я считаю, что их невозможно удовлетворить. Даже если бы мы могли удовлетворить их все, размер библиотеки был бы огромным и, скорее всего, сама библиотека не была бы действительно полезной.

Так Egkyron оставляет интеграцию пользовательского интерфейса с пользователем. Есть примеры, и я с радостью отвечу на любые вопросы/вопросы.

Кроме examples, здесь plunk с примером JS с простым браузером.

Answer 2

Если вы хотите проверить на стороне клиента, вам нужно написать свою собственную библиотеку для данных - теги **** для проверки ввода или рассмотреть возможность добавления JQuery Unobtrusive Validation.