VEE-VALIDATE VUE 2.0 Custom Form Verification Instance

Pro test can be used

First, you can read official document , more detail, you can read rules in the official website .

First, install

You can install this plugin via NPM or via CDN.

NPM Install Vee-Validate –save
   

vue.use (veevalidate); / / Good to go.
   or you can import it using ES6:       Import Vue from 'Vue'; Import VeeValidate from '; Vue.use (VeevalIDate); 
Second, use Chinese prompt

Unconfigured error prompts that the default is displayed in English. If you want to use Chinese display, we will be manually configured, first in main.js

  Import VeeValidate, {Validator} from 'Vee-Validate'; import cn from 'Vee-Validate / Dist / Locale / EN_CN'; Validator.Localize ('CN', CN);  
Third, modify the default error prompt information

/ / Modify the default error prompt const dict = {CN: {Messages: {required: (name) => `$ {name} can’t be empty!`}} // Name Accept the value of Alias.} Validator.localize (DICT);

Demo modified the REQUIRED error prompt information because Chinese used (previously introduced), so it is CN. Finally, use the localize method to add to the Validator.
   

Validator.extend (‘Mobile’, {GetMessage: Field => “Please enter Right mobile phone number “, validate: value => value.length === 11 && / ^ ((13 | 14 | 15 | 17 | 18) [0-9] {1} \ D {8}) $ /. Test (value)};

The first parameter of Extend is the name of the custom rule, which can be used as using the default rule, and the incorrect prompt is in GetMessage. Information, Validate is a verification rule, returns a boolean value or promise.
   

Mobile phone number

{RRORS.FIRST (‘Phone’)}}
   
{RORS.FIRST (‘ Name ‘)}}

Import VeeValidate, {Validator} from ‘Vee-Validate’; import cn from ‘Vee-Validate / Dist / Locale / EN_CN’; Validator.localize (‘cn’, cn); const dict = {cn: {message: {required: (name) => `$ {name} can’t be empty!`}}} Validator.localize (dict); Export Default {Name: ‘Coupon-Example’, Validator: NULL, DATA: () => ({Phone: ”, Name: ”, ERRORS: NULL}, computed: {}, methods: {applycoupon () {/ / Submit execution function this.validator.validate (‘name’, this.name) .Then ((result) => this.discounted = result); this.validator.validate (‘Phone’, this.phone) .Then ( (result) => this.discounted = result);}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, created () {this.validator = new VAlidator ({}); validator.extend (‘Mobile’, {getMessage: Field => “Please enter the correct mobile number”, validate: value => value.length === 11 && / ^ ((13 | 14 | 15 | 17 | 18) [0-9] {1} \ D {8}) $ /. Test (value)}); Validator.extend (‘name “, {getMessage: Field =>” Please enter the correct name ” , Validate: value => value == ‘Tom’}; this.validator.attach ({name: ‘name’, rules: ‘required | name’, alias: ‘Name’}); this.validator.attach ( {Name: ‘Phone’, Rules: ‘Required | Mobile’, Alias: ‘Phone’}); // Add a verification rule using ATTACH as the first parameter of its first parameter using ATTACH. THIS. $ SET (this, ‘Errors’, this.validator.errors);}};
 .rror {font-size: 12px; color: # ff1c13;}   
The above VEE-VALIDATE VUE 2.0 custom form verification instance is all the contents of Xiaobian sharing, I hope to give you a reference, I hope everyone will support Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment