VeevalIDate’s use scenario and configuration details


Vue Init Webpack Veecd ./vee npm Run Dev # oryarn Run Dev
   

NPM INSTALL VEE-VALIDATE –SAVE # oryarn add vee-validate –Save

The VeeValidate version used herein is 2.1.5
 Introduced in App.Vue   
Vue.use (veevalidate);

Example

 The first test example   

{RRORS.FIRST (‘Nickname’) }}


Export Default {Name: “Test1″, DATA () {Return {Formdata: {Nickname: ”, Password: ‘,}}}, methods:{Handlesubmit () {this. $ validator.validate () .Then ((VALID) => {if (true === valid) {console.log (‘authentication “);} else {console.log (this. $ validator.errors.all ());}})}}}
.test1 {width: 900px; margin: 0 auto;}
   
For more configuration, please refer to the official website!

We only use some common configuration and commonly used verification!
Global Configuration Import VeeValidate, {Validator} from 'Vee-Validate'; import zh_cn from 'VEE-VALIDATE / DIST / LOCALE / EN_CN'; VUE. Use (veevalidate, {dictionary: {zh_cn: zh_cn}); validator.localize;
This can use Chinese prompts!


Custom Error Tip


{ {ErrorS.First (‘Nickname’)}}
  {RORS.FIRST ('password')}} 

const value = {Custom: {nickname: { Required: () => ‘Nickname is not empty’, // Writing 1 min: “Nickname is not less than 3 characters”, // Writing 2 max: () => ‘Nickname must not be greater than 10 characters’}, password: {Required: () => ‘The password is not empty’, min: “Password is not less than 5 characters”, max: () => ‘The password is not greater than 200 characters’}},}; export default {name: ” Test2 “, DATA: {NickName: ”, Password: ”,}}}, methods: {handlesubmit () {this. $ validator.validate () .Then ((value) => { IF (true === valid) {console.log (‘verification via’);} else {console.log (this. $ validator.erroS.all ());}})}}, mounted () {this. $ validator.localize;}}

Custom verification rules
   
{RORS.First ('Nickname')}}
{Errors.First ('password')}}
{RRORS.FIRST ('RE_Password')}}
{.}}
Submit
const value = {Custom: {Nickname: {Required: () => ‘Nickname is not empty’, // Writing 1 min: “Nickname is not less than 3 characters”, // Writing 2 max: () => ‘Nickname must not be greater than 10 characters }, password: {required: () => ‘The password is not empty’, min: “Password is not less than 5 characters”, max: () => ‘The password must not be greater than 200 characters’}, RE_Password: {Required: () => ‘Please enter your password again!’,}, Mobile: {required: () => ‘Please enter your mobile number!’,}},}; Export default {name: “TEST3″, DATA () {Return {FormData: {nickname: ”, password: ”, re_password: ”, Mobile: ”}}}, Methods: {HANDLESUBMIT () {this. $ validator.validate () .then ((value) => {if (true === valid) {console.log (‘verification “);} else {Console .log (this. $ validator.errors.all ());}})}}}}}}}})}}}}}}}})}}}})}}}})}}}}}}}})}}}}}}}}}}}}}}}}}}}} {GetMessage: Field => ‘mobile phone number incorrect’, validate: value => {RETURN / ^ ((13 | 14 | 15 | 17 | 18) [0-9] {1} \ D {8}) $ / .test (value)}}) this. $ validator.extend (‘confirm’, {getMessage: Field => ‘Two password input inconsistency “Validate: value => {return value === this.formData.password} })}}}


Show the first error!

 Sometimes we need to pop up The user is prompted to display the first error   
this. $ Validator.errors.Items [0] .msg
Example sent verification code and registration!
This example is a verification code is a verification. It is a bit meaningless!
When sending the verification code, you need to verify the mobile phone number and graphic verification code registration. Verify data other than graphical verification code
Template
{{Errors.First ('Mobile')}}

{RRORS.FIRST (‘IMG_CAPTCHA’)}}
Get verification code

{RRORS.FIRST (‘SMS_CAPTCHA’)}}
  {{ErrorS.First ('Password')}}  
{RRORS.FIRST (‘re_password’)}}



{{Errors.First (‘Nickname’)}}

{RRORS.FIRST (‘ID_card’)}} VeeValidate 的使用场景以及配置详解

VeeValidate 的使用场景以及配置详解

{Errors.First (‘birthday’)}}

{RORS.FIRST (‘url’)}}
   {.s.ftt}} 
{RRORS.FIRST ('Age')}}
Style code (this is a casually written CSS, don't vomit, ha)
.ERR {color: red; font-size :} .Reg {width: 500px; margin: 0 auto;} .send_sms {position: relative;} .send_sms_btn}: Absolute; Width: 100PX; Height: 30px; Right: -11px Top: 2px; cursor: Pointer; Border: None; Border-Radius: 4px; Background-Color: # e4393c; Outline: None; color: #fff;} .form_item {margin-bottom: 10px; wiDTH: 400PX;} Input {Width: 400px; Height: 30px; Border: 1px Solid # 999; Border-Radius: 4px; Outline: None; Padding-Left: 10px;} .reg_btn {width: 100PX; Height: 30px; Border: None; Border-Radius: 4px; Background-Color: # E4393c; OUTLINE: NONE; CURSOR: POINTER; Color: #fff;}
js
Import {Messages} from '../Validate/reg' export default {name: "reg", data () {return {url : ', age:' ', email:' ', birthday:', id_card: ', nickname:' ', mobile:', IMG_CAPTCHA: ', SMS_CAPTCHA:', PASSWORD: ', RE_PASSWORD : '',}}, mounted () {this. $ validator.localize; this. $ validator.extend ('Mobile', {getMessage: Field => "mobile phone number incorrect" Validate : value => {Return /^( ((13 |14|15|17|18) [0-9]}}} (Value)}}); this. $ validator.extend ('id_card " , {getMessage: Field => 'ID number format incorrect', validate: value => {return / (^ \ d {15} $) | (^ \ d {18} $) | (^ \ d {17 } (\ d | x | x) $) /. Test (value)}};}, methods: {handleSubmit () {this. $ validator.errors.clear (); this. $ validator.validateAll ({Mobile : this.mobile, password: this.password, sms_captcha: this.sms_captcha, re_password: this.re_password, url: this.url, age: this.age, email: this.email, birthday: this.birthday, id_card: this .id_card, nickname: this.neickname,}). THEN ((VALID) => {console.log (valid); if (true === valid) {console.log ('verification through');} else {Console .log (this. $ validator.errors.all ());}});}});}, Handlesendsms () {this. $ VALidator.errors.clear (); this. $ validator.validateAll ({Mobile: this.mobile, IMG_CAPTCHA: this.img_captcha}). The ((Valid) => {Console.log (Valid); if (true == = VALID) {Console.log ('Verification via');} else {console.log (this. $ validator.erroS.all ());}});}}}
External introduced JS
export const message = {Custom: {mobile: {Required: ) => 'Please enter your mobile number!', Mobile: () => 'mobile phone number incorrect',}, img_captcha: {required: () => 'Please enter graphics verification code!',}, SMS_CAPTCHA: {Required : () => 'Please send SMS verification code!', Length: () => 'SMS verification code is 6 digits'}, password: {required: () => 'The password is not empty', min: ( ) => The password is not less than 8 characters',}, re_password: {required: () => 'Please enter the password again!', Confirmed: () => 'Two password input inconsistency'}, nickname: {Required : () => 'Please enter a nickname', min: () =>' nickname minimum 3 characters', max: (field, params) => {returna nickname up to $ {params [0]} bit character`;}}, id_card: {Required : "The ID number is not empty"}, birthday: {required: "Please select the date of birth", Date_Format: "Birth Date incorrect"}, url: {required: () => "Please enter your personal URL", URL : () => "URL input incorrect"}, email: {required: () => "Please enter an email", email: () => "Email input incorrect"}, age: {required: ( ) => "Please enter age", Between: () => "age must be between 18-60"}},};
Expand Content
Export Const message = {Custom: {Nickname: {Required: () => "Please enter age", Between: (FiIELD, params) => `age must be in $ {params [0]} - $ {params [1]} The first parameter between the ages is the first parameter in the rule is the parameter of the field name. The second parameter is the parameters behind the verification rule;
Verify the designated field
ValidateAll ({Mobile: this.moble});
can also be specified, but the method can also be specified using DATA-VV-Scope. No some scenes;
When the error message must be specified, the value of scope must not display the error message
The above is all the contents of this article, I hope to everyone I have helpful, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment