vueではvee-validatorを使ってフォーム検証方案を完成します。

前言
ほとんどのモバイル端末のコンポーネントライブラリはフォームチェックを提供しないので、自分でカプセル化する必要があります。現在、多く使われているのはasync-validatorとvee-validatorです。ここで、element UIコンポーネントライブラリが提供するフォーム検証もasync-validatorに基づいており、vee-validatorはvueテンプレートに基づく軽量級検査フレームである。プロジェクトの需要に応じて、自分で適切な方案を選ぶことができます。本稿では主にvee-validator検査方案を検討します。
フォーム検証のパッケージ
vueプロジェクトでは、フォームチェックは、フロントエンドの開発者ごとに避けられない需要です。検証のメリットは、不要なhttp要求を回避することができ、また、要求を送信しないことによって、ユーザの体験効果を高めることができる。
インストールnpm install vee-validate --save導入する
普通は私達はここにいます srcディレクトリの下に新しいフォルダを作成して、中に新しいフォルダを作成します。 validator.jsと validator Rule.jsファイル。 validator.jsファイルは私達のを導入するために使います。 vee-validtor、 validatorRule.jsファイルは検査のルールを定義するために使用されます。もちろん、国際化コンポーネントを使うなら、main.jsに登録する必要があります。
mail.jsファイルの配置

import VueI18n from 'vue-i18n' //      
import {Validator} from 'vee-validate' //       
let language = 'zh_CN'

Vue.use(VueI18n)
Validator.locale = language
const i18n = new VueI18n({
 locale: language,
 messages
})

new Vue({
 i18n
})

validator.jsファイルに導入する

import Vue from 'vue'
import VeeValidate from 'vee-validate'//     
Vue.use(VeeValidate)

ルールの設定
vee-validatorはデフォルトでは自動的に導入されないので、自分で導入しなければなりません。普通は中国語の文書だけが必要ですが、国際化をサポートする必要がありますので、中国語のプラグインを導入します。

//       
import zhCN from 'vee-validate/dist/locale/zh_CN'
//       
import en from 'vee-validate/dist/locale/en'

//           
Validator.localize('zh_CN', {
 //    
 messages: zhCN.messages,
 //           ，     
 attributes: attributesCh
})
//           
Validator.localize('en', {
 messages: en.messages,
 attributes: attributesEn
})

カスタムルール
以下のパッケージ方法で検証を行います。

validName

erMsgZh

errMsgEn

validate

しかし、多くの場合、正規表現を使うことをおすすめします。正則ではないので、特殊な処理をします。

export function setMessage(validName, errMsgZh, errMsgEn, validate) {
 Validator.locale = 'en'
        ,   validName,        v-validate="'required|phone'"
 Validator.extend(validName, {
 //     ，        
 getMessage: (field, [args]) => {
  return errMsgEn
 },
 //     ，      ，      (         )
 validate: validate
 })
 Validator.locale = 'zh_CN'
 Validator.extend(validName, {
 getMessage: (field, [args]) => {
  return errMsgZh
 },
 validate: validate
 })
}

規則的方法の適用
validatoRule.jsに方法を導入して、具体的な検査規則を定義します。以下は二つの規則を列挙します。他の検査規則は自分で百度もいいです。

import {setMessage} from '../validate'

setMessage('phoneNum', '      ', 'phoneNum error', (value, [args]) => {
 const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
 return reg.test(value)
})
setMessage('personName', '              ', 'username no yes', (value, [args]) => {
 const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
 return reg.test(value)
})

エイリアスの設定
使用 vee-validate内部で提供されている検証ルールは、別名を使わないと、現在の要素のname値を固定してエラーメッセージを表示します。私の下に示すように、別名を使わないと、非空検証を使用します。中国語の環境下では、myPhoneが必要です。このようにユーザーはmyPhoneが何かを知ることができません。したがって、エイリアスの例に対応するユーザは、対応する要素のエイリアス設定規則をよりよく識別し、 keyはあなたの要素です name属性、 valueはエラーがある情報です。展示の値です。
1、別名中国語

export const attributesCh = {
 relation: '  ',
 relationDesc: '    ',
 personName: '  ',
 accountName: '   ',
 gender: '  ',
 phone: '   '
 ...
}

2、別名英語

export const attributesEn = {
 phoneNum: 'phoneNum',
 userName: 'name',
 idCard: 'idCard',
 zipCode: 'zipCode',
 personMail: 'Email',
 addressDetail: 'address',
 isSmoker: 'isSmoker'
 ...
}

はい、パッケージは基本的にこんなに簡単です。最後に完全なコードを貼り付けます。
validator.jsファイル。

import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zhCN from 'vee-validate/dist/locale/zh_CN'
import en from 'vee-validate/dist/locale/en'

import {attributesCh, attributesEn} from 'common/js/validateRule'

Vue.use(VeeValidate)

Validator.localize('zh_CN', {
 messages: zhCN.messages,
 attributes: attributesCh
})
Validator.localize('en', {
 messages: en.messages,
 attributes: attributesEn
})

export function setMessage(validName, errMsgZh, errMsgEn, validate) {
 Validator.locale = 'en'
 Validator.extend(validName, {
 getMessage: (field, [args]) => {
  return errMsgEn
 },
 validate: validate
 })
 Validator.locale = 'zh_CN'
 Validator.extend(validName, {
 getMessage: (field, [args]) => {
  return errMsgZh
 },
 validate: validate
 })
}

validator Rule.jsファイル

import {setMessage} from 'common/js/validate'
import {idCardNoUtil} from 'common/js/validateExternal'

setMessage('phoneNum', '      ', 'phoneNum error', (value, [args]) => {
 const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
 return reg.test(value)
})
setMessage('personName', '              ', 'username no yes', (value, [args]) => {
 const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
 return reg.test(value)
})
//     
export const attributesCh = {
 relation: '  ',
 relationDesc: '    '
 ...
}
//     
export const attributesEn = {
 phoneNum: 'phoneNum',
 userName: 'name',
 idCard: 'idCard'
 ...
}

好きなら、ください。♥でしょう。
締め括りをつける
以上述べたのは小编が皆さんに绍介したvueの中でvee-validatorを使ってフォームの検査方案を完成しました。皆さんに助けを求めています。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。