Vuerifyは、シンプルで軽量のデータ検証プラグインです。組み込みの基本的な検証ルールとエラープロンプト。カスタマイズ可能なルール、およびルールタイプは、通常の機能、関数、または文字列をサポートします。検証ルールは、グローバルまたはコンポーネント内で登録できます。プラグインは$ VuerifyオブジェクトをVMに追加し、同時にデータを監視して合法性を確認します。エラーがある場合、vm。$ vuerify。$エラーが保存されます。
インストール
npm i vuerify -S
使用
プラグインをインストールします
'vue'import vuerifyから' vuerify'vue.use(vuerify、 /*カスタムルールの追加* /)からvueをインポートする
カスタムルールを追加します
テストは、通常または機能にすることができます
{必須:{test:// s+$/、message: 'required'}}コンポーネント内で登録します
{data(){username: ''、password: ''}、vuerify:{username:{test:// w {4、}/、//カスタムルール。これは関数、定期的またはグローバル登録ルール(strings in in in)メッセージ:「少なくとも4文字 '}、「必要な」//グローバル登録の使用}}}}}API
$ vuerifyには、次のプロパティが含まれています
namedescriptiontypedefault値
$エラーエラーメッセージデータの確認に失敗します。たとえば、ユーザー名がチェックに失敗した場合、{username: 'appo 4 chature'} object {}を返します。
Invalidには、Booleantrueを確認できなかったフィールドがあります
有効なものには、booleanfalseを確認できないフィールドがありません
指定されたフィールドを確認し、配列に渡し、booleanfunction(array)を返します -
クリアクリアエラーリスト機能 -
v-vuerrify
このディレクティブはデータを検証し、フォームコンポーネントがBluRイベントをトリガーするときにコンポーネントのクラス名を設定します(デフォルトは.Vuerify-Invalidです)。入力などのネイティブコンポーネントであるか、それ自体でカプセル化されたコンポーネントである場合があります。 2つのバージョンが利用可能です
インストール
#vue 1.xnpm v-vuerify -s#vue 2.0npm v-vuerify-next -s
使用法
'v-vuerify' // vue1. vuerifydirectionからの 'vue'import vuerifydirectionからのインポート' v-vuerify-next '// vue2.0vue.use.use(vuerifydel = "<input v-model =" username "v-vuerife ="' username = ""> < v-vuerify = "'password'"> </x-input>
パラメーション
VerifyInValidClass
デフォルトのクラス名はvuerify-invalidです
<入力v-model = "username" v-vuerify = "'username'" vuerify-valid-class = "error">
修飾子
親
Vuerifyが親コンポーネントに登録されている場合、ディレクティブが親コンポーネントから対応する$ Vuerifyを取得できるように、親を指定する必要があります。詳細については、デモを参照してください
イベント
vuerify-invalid
vuerify-valid
github:https://github.com/qingwei-li/vuerrify