网上关于vee-validate3.0的文章并不多,但是很幸运有详细的官方文档。由于没有用过vee-validate2.x版本,加上技术没那么牛逼,所以阅读起来有些障碍。花了比较多的时间去阅读文档和采坑,终于有了点心得。先把遇到的情况写下来,以后再详细补充。
vee-validate3.0有什么方法提供我们使用,暴露出多少接口?
可以查看vee-validate3.0的源码
export { ValidationObserver, ValidationProvider, configure, extend, install, localize, setInteractionMode, validate, version, withValidation }
数一数,有十个。
其中组件两个: validationobserver,calidationprovider,
配置一个configure
验证规则扩展方法一个extend
install:这个方法暂时不清楚有什么用,但是应该不是用来挂载在vue.prototype上面的。以后再看一下。
localize:本地化的,以后看官网再说
setInteractionMode: 这个是自定义验证模式的,例如lazy验证模式是由blur和xx组成,他可以自定义一个验证模式,由什么事件触发验证,例如change,input,blur,focus等等
validate:验证,这个不是组件上面的方法,有待考究
version:这个就是vee-validate的版本
withValidation:这个用来自定义验证组件的,例如你写了一个验证账号的组件,但是验证账号和验证密码的组件差不多,你就可以用withValidation这个函数来扩展这个组件,将rules,v-model这些自定义,这样实现自定义验证组件的复用。
最基础的应该是ValidationProvider ,这个最基本的一个组件,用来包裹一个需要验证的项目。例如
<ValidationProvider rules="required" >
<input text="password" v-model="password">
</ ValidationProvider>
如果有多个组件需要验证,就这样子。
<validationobserver>
<validationprovider></ validationprovider>
<validationprovider></ validationprovider>
</validationobserver>
手动验证和自动验证
扩展验证规则
extend(‘required’, required)
也可以传一个对象,对象里面穿参数,错误信息等等
extend(‘required’, {
params: { arg},
validate (value, {arg}) {
//xxxxx
},
message: ‘haha’
})
晚点再写,再整理