データ注釈とJavaScriptを使用したモデル/フォームの検証

Question

私のASP MVCアプリケーションでデータ検証を実装したいと思います。私は現在、このようなデータ注釈を使用しています。そして、私はしかし、このプロジェクトはjQueryのを持っていない、jqueryの控えめな検証を使用して細かいことを検証することができ

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

のようなものに変わるでしょう

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

。それはJavascriptから直接構築されており、我々はそれをそのまま維持する予定です。

jQueryなしでこれを行う方法はありますか？

Answer 1

コメントごとに、Javascriptでモデル検証を実装するライブラリがあります。私は1つ、Egkyronを書き、私の仕事でそれを使用しています。これらのライブラリを使用すると、サーバー側と同様に、UIではなく、モデルの検証規則を定義できます。

とJSで定義されてUserモデルを想定：あなたはJS注釈の同等とその検証ルールを定義することができ

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

：

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＃でサーバー側で書き込むものに非常に近いものです。実際、以前のプロジェクトでは、がサーバークラスのC＃クラスから JSクラス+検証ルールを生成しました。

その後、あなたは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; 

。検証結果を取得した

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

、あなたはおそらく、UIにそれを提示したい：user = new User()場合validationResultは次のようになります。さまざまな要件と小さなバリエーションが数多くあります。私はそれらのすべてを満たすことは不可能だと信じています。たとえそれをすべて満たすことができたとしても、図書館の大きさは膨大になり、おそらく実際には使えない図書館そのものになるでしょう。

したがって、EgkyronはユーザーとのUI統合を行います。例がありますが、私は喜んで質問/問題に答えます。

examplesのほかに、上記のプレーンブラウザのJSの例のplunkがあります。

Answer 2

クライアント側の検証が必要な場合は、データ - ****タグ用の独自のライブラリを作成して入力を検証するか、JQuery Unobtrusive Validationを追加する必要があります。