VUEフォーム検証---- V字形検証の使用

VEE-検証の使用

*この記事は、特定のVue2.0のためのVueの使用に関するプロジェクトの実際の状況の使用に友人の参照を、ベースに余計な説明ではありません。

まず、インストール

NPMインストールVEE-検証@次--save

注：@next、それ以外のバージョンはVue1.0です

亭インストールV字形のvalidate＃2.0.0-beta.13 --save

第二に、参照

「VUE」からインポートヴュ。
以下からの輸入VeeValidate 'VEE-検証' ; 
Vue.use（VeeValidate）。

コンポーネントの設定：

'VEE-検証'からインポートVeeValidate、{バリ} 。
以下からの輸入メッセージの資産/ JS / zh_CNに" ; 
Validator.updateDictionary（{ 
    がzh_CN：{ 
        メッセージ
    } 
}）。
constの設定 = { 
    errorBagName： 'エラー'、// 変更プロパティの競合の場合。
    遅延：0 、
    ロケール： 'がzh_CN' 、
    メッセージ：ヌル、
    厳密：真
}。
Vue.use（VeeValidate、設定）

資産/ JS / zh_CNには、あなたのプロジェクトにnode_modules VEE-検証/ DIST /ロケール以下/ディレクトリからコピーし、あなたの言語パック、保存するディレクトリを表す
再訪以下のバリより多くのアプリケーションを。
遅延が研究されるように、ミリ秒の入力の数を表し、他の設定パラメータの後に高度なアプリケーション、カスタムエラーに属し、カスタム検証情報に代わってメッセージを確認し、厳密=真の代表者は、フォームのルールを設定していないかどうかを検証しません、errorBagName

使用に基づいて第三に、

< divのクラス= "列がある-12" > 
    < ラベルクラス= "ラベル" のために= "メール" >メール</ ラベル> 
    < p個のクラス= "コントロール" > 
        < 入力V-検証データ・ルールのメール| = "必要" ：クラス=" { '入力'：trueの場合、 'ある-危険'：errors.has（ 'メール'）}」名前= "メール" タイプ= "テキスト" プレースホルダ= "メール" > 
        < スパンV-ショー= 「エラー。持っている（「メール」）」 クラス= 『ヘルプがあり、危険』>{{errors.first（ 'メール'）}} </ スパン> 
    </ P > 
</ DIV >

 

注意：それはVueのインスタンス経由で渡されない限り、エラーメッセージの内部は、通常はフォームのname属性の名前です。
注意：、良い習慣を開発する各フィールドに追加nameまったく存在しない場合、プロパティnameプロパティおよび無結合値が、その後、バリ正しいチェックサムではないかもしれません

errors：

私たちが見る上記のコードはerrors.has、errors.first、誤差が蓄積し、エラーメッセージを処理するために、データモデルのコンポーネントに組み込まれている、あなたは以下のメソッドを呼び出すことができます。

• errors.first('field') - 現在のフィールドの最初のエラーメッセージを取得します。
• collect('field') - エラー（リスト）の現在のフィールドに関するすべての情報を取得します。
• has('field') - 現在のエラー（真/偽）を申請しました
• all() - すべての現在のフォームのエラー（リスト）
• any() - すべてのエラー（真/偽）の現在の形式
• add(String field, String msg) - エラーを追加します。
• clear() - クリアエラー
• count() - エラーの数
• remove(String field) - クリアすべてのエラーの提出

上のValidator

バリデータは、$validator自動的にVueのコンポーネントインスタンスに注入されます。しかし、また、指定されたフィールドを横切るオブジェクトを渡すために手動で正当な方法のための形態を確認するために使用される、独立して呼び出すことができます。

「VEE-検証」からインポート{検証} 。
CONSTバリ = 新しいバリデータ（{ 
    メール： '必要|メール' 、
    名称： '必須|アルファ|最小：3' 、
}）。
// またはValidator.create（{...}）。

あなたがオブジェクトを設定した後のパラメータもバリデータで構築することができます

「VEE-検証」からインポート{検証} 。
constのバリデータ = 新しいバリ（）; 

validator.attach（ 'メール'、 '必要|メール'）; // フィールドを添付する。
validator.attach（ '名前'、 '必要|アルファ'、 '完全な名前'）; // エラー発生の表示名でフィールドを添付してください。

validator.detach（ [メール]）; // あなたはまた、フィールドを切り離すことができます。

最後に、あなたもこのように、チェックすることによって、あなたができるかどうか、フィールドに直接テストを値を渡すことができます。

Validator.validate（ 'メール'では、 '[email protected]'）; // trueに 
Validator.validate（ 'メールで'、 'バーFOO @'）; // falseに
// または同時にチェックする複数の：
validator.validateAllを（{ 
    メールで：「[email protected]」、
    名：『ジョン・スノーは』
}）; 
// 長いチェックが失敗したとして、それはfalseを返します

第四に、組み込みのバリデーションルール

• after{target} - 正規目標日付形式（DD / MM / YYYY）よりもはるかに大きいです
• alpha - 英語のみの文字が含まれています
• alpha_dash - 英語、数字、アンダースコア、ダッシュを含めることができます
• alpha_num - 英数字を含めることができます
• before:{target} - そして後に反対
• between:{min},{max} - minとmaxの間の数
• confirmed:{target} - 同じをターゲットとする必要があります
• date_between:{min,max} - 最小値と最大値の間の日付
• date_format:{format} - フォーマットの日付への法的形式
• decimal:{decimals?} - デジタル、およびバイナリ小数であります
• digits:{length} - デジタルの長さの長さ
• dimensions:{width},{height} - 幅と高さの規定に沿ってピクチャー
• email - 説明されていません。
• ext:[extensions] - 延長
• image - 画像
• in:[list] - 値は、リストの配列に含まれます
• ip - IPv4のアドレス
• max:{length} - 長さの文字の最大長
• mimes:[list] - ファイルの種類
• min - 最大リバース
• mot_in - 逆に
• numeric - 数字のみを許可します
• regex:{pattern} - 値が規則的なパターンに適合しなければなりません
• required - 説明されていません。
• size:{kb} - ファイルサイズは超えていません
• url:{domain?} - （指定されたドメイン名）URL

第五に、カスタム検証ルール

1.直接定義

バリ=定数（値、引数）=> {
     // リターンA又はAブールプロミス。
}
 // 最も基本的な形態は、唯一のデフォルトのエラーで、ブール値又は約束を返します

2.オブジェクトの形

バリ= CONST { 
    のgetMessage（フィールド、引数）{ // 英語のデフォルトのエラーメッセージに追加
        // Aメッセージを返す。
    }、
    検証（値、引数を）{ 
        //はブールまたはAプロミス返します。
    } 
}。

言語固有のエラーメッセージを追加3。

バリ= CONST { 
    メッセージ：{ 
        EN：（フィールド、引数） => {
             // 英語のエラー
        }、
        CN：（フィールド、引数） => {
             // 中国語エラー
        } 
    }、
    検証（値、引数）{ 
        / / 戻り値ブールまたはAの約束。
    } 
};

 

ルールを作成した後、バリデータに追加する方法を拡張

「VEE-検証」からインポート{検証} 。
CONST isMobile = { 
    メッセージ：{ 
        EN：（フィールド、引数） =>フィールド+ '必须是11位手机号码' 、
    }、
    検証：（値、引数） => {
        戻り value.length == 11 && / ^（ （13 | 14 | 15 | 17 | 18）[0-9] {1} \ D {8}）$ / .TEST（値）
    } 
} 
Validator.extend（ ）、'モバイル' isMobile。

//或者直接 Validator.extend('mobile', { messages: { en:field => field + '必须是11位手机号码', }, validate: value => { return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) } });

そして、あなたは組み込みのルールなどのモバイルの使用に直接取ることができます。

< 入力V-検証データルール= "必要|モバイル" ：クラス= "{ '入力'真'であり、危険'：errors.has（ 'モバイル'）}" 名前= "モバイル" タイプ= "テキスト" プレースホルダ="モバイル」> 
< スパンV-ショー= "errors.hasは（ 'モバイル'）は、" クラス= "ヘルプ"は、危険である> {{errors.first（ 'モバイル'）}} </ スパン>

 

4.カスタムビルトインルールのエラーメッセージ

インポート'VEE-検証'から{検証} ; 

constの辞書 = { 
    EN：{ 
        メッセージ：{ 
            アルファ：（） => '一部の辞書英語メッセージS' 
        } 
    }、
    CN：{ 
        メッセージ：{ 
            アルファ：（） =>「アルファへルールは中国語に記載不明確' 
        } 
    } 
}; 

Validator.updateDictionary（辞書）。