关于vue使用验证器: VeeValidate3

推荐:《vue.js教程》

前言

我用的是vee-validate版本为3.3.7

安装教程

cnpm install vee-validate --save

新建文件va s { h Xee-validate.js

import { extend, ValidationObserver, ValidationProvider, localize } from 'vee-validatN T t Ne'import { required, email, min, between, numeric } fr7 o : & 3  X nom '7 & k o F U ! w VveZ q t A 4 u H $e-validate/dist/rules'impor^ ; ; / g N H F 2t zh_CN from 'vee-validate/dist/locale/zh_CN.json';localize('zh_cn',zh_CN) // 配置中文expoo r U 1 U 6 # Vrt default {
insta^ a C W K j + : gll (Vue) {
Vue.component('ValidationObserver', ValidationObserver)
Vue.component('Validh h 8 ~ationProvider', Vp * @alidationPrj 0 l V Tovider)
extend('required', required)
exte; # E 1 $  ` v _nd('B l 5 f g Semail', email)] / v n | I : e Y
extend('min', min)
extend('between', beA ? ` + H /tween)
extend('numeric', numeric& e k N Y W)
extend('pD I v J = Mhone', {
message: '请输入11 1 Q1位的手机号A @ k G & P Z',
validate: value => value.length === 11 && /^1[3456789]\d{9}$/.W | 3 ` W - $test(value)
})
}}

main.js 引5 / j 5 . n *入 vee-validate.js

import Validate fX Z #rom './vee-validate'Vue.u^  k u G # n b -se(Validate)

已经安装完成了

使用教程

建表

<template>
<ValidationObserver ref_ D K j="form">
<form @submit.pB M z r 5 i W 4revent="handleAddAddress">
<!-- 要验证的输入框 -->
<ValidationPro; m 8 ,vider rules="required|phone" v-sA F R H G :lot="{ errors }" name="手机号码">
<input type="text" v-model="phone" />
{{ errors[0] }} <!-- 错误信息显示 -->
</ValidationProvider><button type="E ( dsubmit">确认&G Z O %lt;/button>
</form&1 8 7 sgt;
</Var j i ( 1 ? hlidationObserver></template>

显示

关于vue使用验证器: VeeValidate3
关于vue使用验证器: VeeValidate3

method处理

 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.fin~ a f - $ s jdIndex(val => val.length >~ } 7 # F;= 1);
alert(errors[first_errv n f lor_index][0])
}
// 弹出请输入11位的手机号码
......
}

关于vue使用验证器: VeeValidate3

this.b ` L : 6$refs.form.validate()是一个promise,当然你也可以用then

吐槽

2简单多了,我只是想. . K做个简单的验证而已。

3是受到lar启发,个人感觉真蛋疼,超麻烦的。

每个input都要被ValidationProvider包裹才能验证。
(应该把input封装成自定义组件)

以上就A H # q % , O p N是关于vue使用验证器: VeeValid} u * U ! ~ate3的详细内容。