Element UIフレームにおけるフォームデータの検証方法

前言
Element UIフレームにおけるフォーム検証は、async-validatorを用いて実施され、GitHubのアドレスはhttps://github.com/yiminghe/async-validatorであり、これまでGitHubに5.1＋のstarがあり、複数のフロントエンドフレームで使用されているフォーム検証メカニズムである.npmにおけるライブラリのAPI文書アドレスは、http://npm.taobao.org/package/async-validatorである.
一、Element UIにおけるフォーム要素の検証ルール
Element UIのフレームワークでは、フォームは、el-formペアとel-form-temペアを使用して実装されている.フォームの検証は、el-formタグペアのrules属性を使用して設定されます.
Element UIフレームにおいて、フォームデータを検証するためには、el-formラベルペアとel-form-temマークペアを設定する必要があります.設定ルールは以下の通りです.

el-formラベルペアのrules属性は、データエリアで1つのオブジェクト型データとしてバインディングされている.

.rulesオブジェクトのキー名は、フォーム要素がv−modelを利用してバインディングされた変数名と一致しなければならない.

.rulesオブジェクトのキーパッドの値は配列であり、配列要素はフォーム要素の複数の検証ルールである.

el-form-intemフラグは、フォーム要素のために必要な認証ルールを設定するためにprop属性を使用する.

コード例は以下の通りです.

data:function(){
  return {
    rules:{
      userNick:[
        {required:true, message:'        ', trigger:'blur'}
      ]
    }
  }
}

二、async-validatorの検証ルール
1、required
機能:フォーム要素が必須項目かどうかを検証し、値を論理値とします.
2、type
機能:フォーム要素が入力したデータが従うべきデータの種類を検証します.
値を取る:

string-デフォルト値は、設定が文字型でなければなりません.

number-設定は数値型でなければなりません.

bootlean-設定は論理型でなければなりません.

integer-設定は整形値でなければなりません.

float-設定は実数でなければなりません.

array-設定は、配列データでなければなりません.

object-設定は、配列ではなくオブジェクトデータでなければなりません.

method-設定はfunction関数でなければなりません.

date-設定は日付フォーマットを満たす必要があります.

url-設定はドメイン名フォーマットを満たす必要があります.

email-設定は電子メールアドレスフォーマットを満たす必要があります.

hex-設定は16進数データフォーマットでなければなりません.

enum-設定は列挙可能な値でなければなりません.

any−設定は、任意のタイプのデータであってもよい.

3、enum
機能:エニュメレート・チェックのエニュメレート・値を指定します.
例えば、sexフォームの要素は「男」または「女」のいずれかしか取れないと規定されています.

rules:{
  sex:[
    {type:'enum', enum:[' ',' ']}
  ]
}

4、メッセージ
機能:入力データが規則違反の場合に与えるヒントを指定します.
5、トリガー
機能:ルール違反を検出するトリガー機構を指定します.
(1)テキストボックスは、通常、blurイベントを検出トリガ機構として使用する.
(2)単一選択枠、チェックボックス、リストメニューは、検出トリガ機構として一般的にchangeイベントを採用する.
6、min、max
機能:数値クラスのデータが取得できる範囲、文字クラスのデータの文字数の範囲を指定します.
7、len
機能:文字クラスのデータが満たさなければならない文字の個数を指定します.
8、pattern
機能:該当する正規表現を指定します.
9、validator
機能:カスタム関数を指定して、ユーザー定義の検証を実行します.
関数は、データエリアのreturn以外の部分を定義しなければなりません.
関数には3つのパラメータが含まれます.rule、value、calback.

パラメータrule-は、検証されたフィールド名、データタイプなどが記録されたオブジェクトを返します.

パラメータvalue-ユーザーがフォーム要素に入力した内容または選択の結果.

パラメータcalback-検証エラーが発生した場合、calbackコールコールバック関数を使ってエラークラスの例を返します.

三、二つの公式サイトの実例
以下の2つの事例は、Element UI公式サイトが提供するユーザー定義の検証事例に基づいて改編されたものです.
公式サイトの事例1:ユーザーの年齢に対してフォーム要素の正確性を検証する.空ではいけないと規定されています.数値でなければならないです.18歳以上の年齢が必要です.

data:function(){
  let checkAge=(rule,value,callback)=>{
    if(!value){
      callback(new Error('      '));
    }else{
     if(!Number.isInteger(value)){
       callback(newError('      '));
     }else if(value<18){
       callback(newError('    18  '));
     }else{
       callback();
     }
   }
 };
 return {
   rules:{
     age:[
       {validator:checkAge, trigger:'blur'}
     ]
   }
 }
}

公式サイトのケース2:確認パスワードは元のパスワードと一致して入力しなければなりません.

data:function(){
  let validatePassword2=(rule,value,callback)=>{
    if(value===‘’){
      callback(new Error(‘        ’));
    }else if()(value!==this.ruleForm.password1){
      callback(newError(‘           ’));
    }else{
      callback();
    }
  };
  return {
    rules:{
      password2:[
        {validator:validatePassword2, trigger:‘blur’}
      ]
    }
  }
}