Personal test available
Learn vee-validate, you can first readOfficial Documentation, for more details, you can read the official websiterule。
1. Installation
You can install this plugin via npm or via CDN.
1. NPM
npm install vee-validate --save
2. CDN
<script src="path/to/"></script> <script src="path/to/"></script> <script> (VeeValidate); // good to go. </script>
Or you can import it using ES6:
import Vue from 'vue'; import VeeValidate from 'vee-validate'; (VeeValidate);
2. Tips for using Chinese
The error prompt that has not been configured is displayed in English by default. If you want to display it in Chinese, we need to configure it manually. First, we will introduce it in
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
('cn', cn);
3. Modify the default error message
// Modify the default error promptconst dict = {
cn: {messages: {required: (name) => `${name}Can't be empty!`}} // name accepts the value of alias.}
(dict);
The required error message was modified in the demo, because the Chinese language used (introduced earlier), it is cn. Finally, add it to Validator using the localize method.
4. Use custom rules
('mobile', {
getMessage: field => "Please enter the correct mobile phone number",
validate: value => === 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. You can use it like using the default rule. GetMessage has error message, validate is a validation rule, and returns a boolean value or promise.
Complete example
<template>
<div class="">
<form @="applyCoupon" class="">
<label class="">Phone number</label>
<p class="">
<input v-model="phone" name="phone" :class="" type="text"
placeholder="Please enter your mobile phone number"><br>
<span v-show="('phone')" class="error">{{ ('phone') }}</span>
</p>
<label class="">Name</label>
<p class="">
<input v-model="name" name="name" :class="" type="text"
placeholder="Please enter your mobile phone number"><br>
<span v-show="('name')" class="error">{{ ('name') }}</span>
</p>
<p class="">
<button type="submit" class="" name="button">Sure</button>
</p>
</form>
</div>
</template>
<script>
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
('cn', cn);
const dict = {
cn: {messages: {required: (name) => `${name}Can't be empty!`}}
}
(dict);
export default {
name: 'coupon-example',
validator: null,
data: () => ({
phone: '',
name: '',
errors: null
}),
computed: {},
methods: {
applyCoupon() { // Submit execution function ('name', ).then((result) => = result);
('phone', ).then((result) => = result);
}
},
created() {
= new Validator({});
('mobile', {
getMessage: field => "Please enter the correct mobile phone number",
validate: value => === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
('name', {
getMessage: field => "Please enter the correct name",
validate: value => value == 'tom'
});
({name: 'name', rules: 'required|name', alias: 'Name'});
({name: 'phone', rules: 'required|mobile', alias: 'cell phone'});
// Add validation rules using attach method with FieldOptions as its first parameter.
this.$set(this, 'errors', );
}
};
</script>
<style>
.error {
font-size: 12px;
color: #ff1c13;
}
</style>
The above example of vee-validate vue 2.0 custom form verification is all the content I share with you. I hope you can give you a reference and I hope you can support me more.