当前第2页 返回上一页
新建表单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template>
<ValidationObserver ref= "form" >
<form @submit.prevent= "handleAddAddress" >
<!-- 要验证的输入框 -->
<ValidationProvider rules= "required|phone" v-slot= "{ errors }" name= "手机号码" >
<input type= "text" v-model= "phone" />
{{ errors[0] }} <!-- 错误信息显示 -->
</ValidationProvider><button type= "submit" >确认</button>
</form>
</ValidationObserver></template>
|
显示
method处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | methods:{
async checkValid () {
return this. $refs .form.validate();
},
async handleAddAddress(e){
let check = await this.checkValid();
if (! check)
{
let errors = Object.values(this. $refs .form.errors);
let first_error_index = errors.findIndex(val => val.length >= 1);
alert(errors[first_error_index][0])
}
......
}
|
1 | this. $refs .form.validate()是一个promise,当然你也可以用then
|
吐槽
2
简单多了,我只是想做个简单的验证而已。
3
是受到lar
启发,个人感觉真蛋疼,超麻烦的。
每个input
都要被ValidationProvider
包裹才能验证。
(应该把input
封装成自定义组件)
以上就是关于vue使用验证器: VeeValidate3的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
vue.js服务端渲染是什么
vue.js是否支持ie8
通过代码实例,带你了解v-model(值得收藏)!
vue.js 学习记录之一:学习规划和了解 vue.js
vue首页为什么会渲染两次?原因和解决方法介绍
怎么使用npm下载vue.js
vue.js如何声明全局变量
vue3.0有哪些新特性
怎样安装vue.js
vue qs是什么
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 关于vue使用验证器: VeeValidate3