Modell-/Formularvalidierung mit Datenanmerkungen und JavaScript

Question

Ich möchte Data Validations auf meiner ASP MVC App implementieren. Ich bin derzeit Daten Anmerkungen wie folgt aus:

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

die dann in so etwas wie

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

drehen würde ich es bestätigen können feine jquery unaufdringlich Validierung verwenden, aber dieses Projekt nicht über jQuery. Es ist direkt aus Javascript erstellt und wir planen, es so zu halten.

Gibt es eine Möglichkeit, dies ohne jQuery zu tun?

Answer 1

Also, wie der Kommentar, gibt es Bibliotheken, die Modellvalidierung in Javascript implementieren. Ich habe einen geschrieben, Egkyron, und benutze es in meiner Arbeit. Mit diesen Bibliotheken definieren Sie Ihre Validierungsregeln für das Modell, nicht die Benutzeroberfläche, genau wie auf der Serverseite.

Angenommen, ein User Modell in JS definiert als:

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

Sie können ihre Validierungsregeln als das Äquivalent von JS Anmerkungen definieren:

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}] 
    ] 
}; 

Wenn Babel oder Typoskript verwenden, können Sie überprüfen die Dekorateure, ein Vorschlag für die ES7-Spezifikation. Eine TS-Klasse konnte mit Anmerkungen versehen werden wie:

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

Die ganz in der Nähe zu dem, was Sie in der Server-Seite mit Java oder C# zu schreiben. In einem früheren Projekt haben wir die JS-Klassen + Validierungsregeln aus den serverseitigen C# -Klassen generiert.

Dann vorausgesetzt, Sie halten ein User Objekt zu erhalten, können Sie es mit Egkyron validieren:

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

Der Validator ist wiederverwendbar; wenn user = new User() sieht die Validation wie:

{ // 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 
      } 
     }, 
     ... 
    } 
} 

ein Prüfungsergebnis erworben haben, werden Sie wahrscheinlich an die UI präsentieren wollen. Es gibt unzählige unterschiedliche Anforderungen und winzige Variationen. Ich glaube, dass es unmöglich ist, alle von ihnen zu befriedigen. Selbst wenn wir sie alle befriedigen könnten, wäre die Bibliotheksgröße enorm und höchstwahrscheinlich die Bibliothek selbst nicht wirklich verwendbar.

So verlässt Egkyron die Benutzeroberflächenintegration. Es gibt Beispiele, und ich werde gerne alle Fragen/Probleme beantworten.

Neben dem examples, hier ist ein plunk mit dem einfachen Browser JS Beispiel oben.

Answer 2

Wenn Sie eine clientseitige Validierung wünschen, müssen Sie eine eigene Bibliothek für Daten schreiben - ****-Tags, um Eingaben zu validieren oder JQuery Unobtrusive Validation hinzuzufügen.