# 1.简介
> vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.
专门搭配vue的健壮性插件
[官网](https://logaretm.github.io/vee-validate/guide/basics.html)
# 2. 安装
```npm
npm i vee-validate --save
```
# 3.使用
使用 **validationProvider**对需要校验的字段进行包裹
```html
<validation-provider rules="secret" v-slot="{ errors }">
<input v-model="email" type="text" />
<span>{{ errors[0] }}</span>
</validation-provider>
```
# 4. 自定义校验规则
main.js中
```html
extend('positive', (value) => {
if (value >= 0) {
return true;
}
return 'This value must be a positive number';
});
```
## 1.表单提交前校验
>使用ref
```html
<template>
<ValidationObserver ref="form">
<form @submit.prevent="onSubmit">
<ValidationProvider name="E-mail" rules="required|email" v-slot="{ errors }">
<input v-model="email" type="email">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider name="First Name" rules="required|alpha" v-slot="{ errors }">
<input v-model="firstName" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider name="Last Name" rules="required|alpha" v-slot="{ errors }">
<input v-model="lastName" type="text">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<button type="submit">Submit</button>
</form>
</ValidationObserver>
</template>
<script>
export default {
data: () => ({
firstName: '',
lastName: '',
email: ''
}),
methods: {
onSubmit () {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
alert('Form has been submitted!');
// Resetting Values
this.firstName = this.lastName = this.email = '';
// Wait until the models are updated in the UI
this.$nextTick(() => {
this.$refs.form.reset();
});
});
}
}
};
</script>
<style lang="stylus" scoped>
span {
display: block;
}
</style>
```
