推荐:《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>
显示
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位的手机号码 ...... }
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的详细内容。