Preface
Since most mobile component libraries do not provide form verification, they need to encapsulate them themselves. Currently, async-validator and vee-validator are used more frequently. Among them, the form verification provided by the elementUI component library is also based on async-validator, which is a lightweight verification framework based on vue templates. You can choose the appropriate plan according to the project's needs. This article mainly discusses the vee-validator verification scheme.
Encapsulation of form verification
In vue projects, form verification is an unavoidable requirement for every front-end developer. The benefits of verification can avoid useless http requests, and the verification does not pass or send requests, and can also improve the user's experience effect.
Install
npm install vee-validate --save
Introduced
Generally, we will create a new folder in the src directory, and create a new and file. The file is used to introduce our vee-validtor, and the file is used to define the rules for verification, and of course it also needs to be registered in it, if an international component is used.
File configuration
import VueI18n from 'vue-i18n' // International plug-inimport {Validator} from 'vee-validate' // Form Verification Componentlet language = 'zh_CN'
(VueI18n)
= language
const i18n = new VueI18n({
locale: language,
messages
})
new Vue({
i18n
})
Introduced into the file
import Vue from 'vue' import VeeValidate from 'vee-validate'// Global registration
(VeeValidate)
Rule settings
By default, vee-validator does not automatically import prompt language packs, so you have to import them yourself. Generally, only Chinese files are needed, but some requirements are to support internationalization, so you need to import Chinese and English plug-ins.
// Introduce Chinese documentsimport zhCN from 'vee-validate/dist/locale/zh_CN'
// Introduce English documentsimport en from 'vee-validate/dist/locale/en'
// Add Chinese verification rule settings('zh_CN', {
// Prompt messages: ,
// The prompt message is set here, and the following will be mentioned attributes: attributesCh
})
// Add English verification rule settings('en', {
messages: ,
attributes: attributesEn
})
Custom rules
The following encapsulation method realizes verification, where
- validName
- errMsgZh
- errMsgEn
- validate
But most of the time, it is recommended to use regular expressions. If the regularity is not done, then do special treatments
export function setMessage(validName, errMsgZh, errMsgEn, validate) {
= 'en'
Custom verification rules,NamedvalidName, Used in this wayv-validate="'required|phone'"
(validName, {
// Prompt message, does not comply with the rules getMessage: (field, [args]) => {
return errMsgEn
},
// Verify the rules, if the rules are passed, otherwise it will not be passed (the rules are US phone numbers) validate: validate
})
= 'zh_CN'
(validName, {
getMessage: (field, [args]) => {
return errMsgZh
},
validate: validate
})
}
Rules and Method Application
The method is introduced to define specific verification rules. The following is only two rules, and other verification rules can be used on Baidu.
import {setMessage} from '../validate'
setMessage('phoneNum', 'The mobile phone number is incorrect', 'phoneNum error', (value, [args]) => {
const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
return (value)
})
setMessage('personName', 'Name can only include Chinese or English letters', 'username no yes', (value, [args]) => {
const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
return (value)
})
Alias Settings
When using the verification rules provided internally by vee-validate, if the alias is not used, the name value of the current element will be used to display the error message. As shown below, if I do not use the alias and use non-empty verification, it will be displayed in the Chinese environment that myPhone is necessary, so the user cannot know what myPhone is, so the corresponding alias example users will better distinguish the corresponding element alias setting rules. Key is the name attribute of your element, and value is the value that has an error message and is the displayed value.
1. Alias Chinese
export const attributesCh = {
relation: 'relation',
relationDesc: 'Relationship Description',
personName: 'Name',
accountName: 'Account Name',
gender: 'gender',
phone: 'Phone number'
...
}
2. Alias in English
export const attributesEn = {
phoneNum: 'phoneNum',
userName: 'name',
idCard: 'idCard',
zipCode: 'zipCode',
personMail: 'Email',
addressDetail: 'address',
isSmoker: 'isSmoker'
...
}
OK, the encapsulation is basically that simple, and finally post the complete code.
document.
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'
(VeeValidate)
('zh_CN', {
messages: ,
attributes: attributesCh
})
('en', {
messages: ,
attributes: attributesEn
})
export function setMessage(validName, errMsgZh, errMsgEn, validate) {
= 'en'
(validName, {
getMessage: (field, [args]) => {
return errMsgEn
},
validate: validate
})
= 'zh_CN'
(validName, {
getMessage: (field, [args]) => {
return errMsgZh
},
validate: validate
})
}
document
import {setMessage} from 'common/js/validate'
import {idCardNoUtil} from 'common/js/validateExternal'
setMessage('phoneNum', 'The mobile phone number is incorrect', 'phoneNum error', (value, [args]) => {
const reg = /^((13|14|15|17|18)[0-9]{1}\d{8})$/
return (value)
})
setMessage('personName', 'Name can only include Chinese or English letters', 'username no yes', (value, [args]) => {
const reg = /^([\u4e00-\u9fa5\s]|[a-zA-Z])*$/
return (value)
})
// Alias Chineseexport const attributesCh = {
relation: 'relation',
relationDesc: 'Relationship Description'
...
}
// Alias in Englishexport const attributesEn = {
phoneNum: 'phoneNum',
userName: 'name',
idCard: 'idCard'
...
}
If you like it, give it one. . . . .
Summarize
The above is the form verification scheme in vue introduced by the editor to you using vee-validator. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!