Vue 中表单验证框架 vee-validate的安装和基本的使用
vee-validate可以对表单进行一个全面的验证,它自带了邮箱 手机 身份证等常用类型验证,是一个Vue.js的基于模板的验证框架官网如下https://baianat.github.io/vee-validate/安装首先我们需要进入项目目录下,比如你的项目叫Demo ,我们进入Demo目录下后 ,打开命令窗口 输入如下命令npm install vee-validat...
vee-validate可以对表单进行一个全面的验证,它自带了邮箱 手机 身份证等常用类型验证,是一个Vue.js的基于模板的验证框架
官网如下 VeeValidate: Painless Vue.js forms
安装
首先我们需要进入项目目录下,比如你的项目叫Demo ,我们进入Demo目录下后 ,打开命令窗口 输入如下命令
npm install vee-validate
安装成功后进入main.js文件中引入它,main.js的vee配置如下
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
注意,这里我是以vuecli3.0的脚手架创建的项目为例
到这里为止我们就安装完成了 然后可以开始使用
<div class="input_group" :class="{error:errors.has('cno')}">
<input name="cno" v-validate="{required:true,max:6,min:4}" type="number"/>
</div>
我们在需要验证的表单中加入,v-validate="{required:true,max:6,min:4}" 其中验证规则很简单,使用required
表明,该表单是必填的,这里我们只判断这个cno表单最大长度为6 最小长度为4,若不满足条件,则它会在errors.has中创建一个名为cno的错误信息
:class="{error:errors.has('cno')}" ,就是用于判断当前errors.has中是否存在一个名为cno的错误信息 ,若有,我们便应用error样式,否则不应用,这里这个errors是全局的,只要我们在main.js中导入它,便可以全局使用,这只是一个最普通的验证。
这里的cno指的是表单的name,所以再使用vee时,我们必须给要用的表单加上一个name,以便errors捕捉错误信息,若我们需要在js中进行判断的话 则可以使用 “this.errors.any()”
if(this.errors.any()){//用于返回全部的校验信息 若有错误则返回true 若全部校验通过没有错误 则返回false
console.log("有错误")
return;
}
但是这里会有个bug,因为它的验证功能只要当我们操作这个表单时才会触发,所以当我们不操作表单时它默认验证是成功的,没有错误信息,会返回false。所以我们需要让它组件加载时就强制开启验证所有表单
mounted() {
//组件一加载完就进行表单校验 强制校验全部表单
this.$validator.validate();
},
注意,这里校验的是应用过vee的表单,若没有使用vee的表单则不会被验证
这里我们只列出安装和简单的使用 它的验证功能远不止这简单
这是vee的官方教程,可以在这里进行系统的学习
更多推荐
所有评论(0)