vueバリデーター(vue-validator)の使い方を詳しく解説-Vue.js-php.cn

vueバリデーター(vue-validator)の使い方を詳しく解説

青灯夜游

リリース： 2020-11-05 17:57:09

転載

4814 人が閲覧しました

vueバリデーター(vue-validator)の使い方を詳しく解説

公式ドキュメント: http://vuejs.github.io/vue-validator/zh-cn/index.html

github プロジェクトのアドレス: https:// github.com/vuejs/vue-validator

vue-validator を単独で使用する方法については公式ドキュメントを参照してください。この記事は vue-router と組み合わせて使用されます。

バリデーターのインストール

カスタムバリデーターやグローバルに使用する必要のないパブリックバリデーターは追加せず、メインにバリデーターをインストールしてください。 .js では、CommonJS モジュール仕様を使用して、明示的に Vue.use() を使用してバリデーターコンポーネントをインストールする必要があります。

import Validator from 'vue-validator'
Vue.use(Validator)

ログイン後にコピー

vue-router と一緒に使用する場合は、router#map、router#start、およびその他のインスタンスメソッドを呼び出す前に検証をインストールする必要があります。

バリデーターをカスタマイズするには、js ファイルを作成し、そのファイルにバリデーターコンポーネントをインストールします。例: validation.js

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器

ログイン後にコピー

Custom validator

提供される公式 API は次のとおりです

input[type="text"]
input[type="radio"]
input[type="checkbox"]
input[type="number"]
input[type="password"]
input[type="email"]
input[type="tel"]
input[type="url"]
select
textarea

ログイン後にコピー

ただし、上記は現時点では、グローバルバリデータの登録と取得には別のグローバル API を使用する必要があります。

Vue.validator( id, [definition] )

ログイン後にコピー

例 validation.js の定義内容は以下のとおりです

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器
//添加一个简单的手机号验证 
//匹配0-9之间的数字,并且长度是11位
Vue.validator('tel', function (val) {
  return /^[0-9]{11}$/.test(val)
});
//添加一个密码验证
//匹配6-20位的任何字类字符，包括下划线。与“[A-Za-z0-9_]”等效。
Vue.validator('passw', function (val) {
  return /^(\w){6,20}$/.test(val)
});

ログイン後にコピー

validator の使用

Validator syntax


  
    
   不得少于3个字符
   不得大于15个字符

ログイン後にコピー

デフォルトでは、 vue-validator は、validator および v-validate 命令に基づいて自動的に検証します。ただし、必要に応じて自動検証をオフにし、手動で検証をトリガーする必要がある場合があります。自動検証が必要ない場合は、初期属性または v-validate 検証ルールを使用して自動検証をオフにすることができます。

は次のとおりです。


  
  
 不得少于3个字符
 不得大于15个字符

ログイン後にコピー

ターミナルコマンドの問題

ログイン後にコピー

例: ユーザー登録の確認

プロンプト情報を表示するコンポーネント

toast.vue

ログイン後にコピー

登録ユーザー: 携帯電話番号を入力し、パスワードを2回入力する必要がある場合

ログイン後にコピー

If 「次のステップ」をクリックすると、検証が失敗したため「フォームに記入してください」というメッセージが表示されます。テキストボックスがフォーカスを取得した後にフォーカスを失った場合は、対応するエラーメッセージが表示されます。コンテンツが正しく入力されている場合は、次のメッセージが表示されます。検証に合格した場合は、対応するリクエストを送信します。

効果は次のとおりです

vueバリデーター(vue-validator)の使い方を詳しく解説