在后端项目里 比如我们的Laravel框架 对于表单验证有自己的一套validation机制 他将验证集成在FormRequest
我们只需要在我们的方法中依赖注入我们自己实例化后的验证类 当然也可以直接去在方法里去验证表单数据
而在我们的前端的项目里 也就是在我们的vue项目里 也有比较好的验证解决方案 也就是这的vuelidate
1.安装
和我们安装前端包一样 在项目终端执行:
$ npm install vuelidate --save
安装完成后和我们去使用vuex一样 在main.js去引入声明这个package:
import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
当然你也可以在需要用到验证的组件里去引用一个相对小的版本:
import { validationMixin } from 'vuelidate' var Component = Vue.extend({ mixins: [validationMixin], validation: { ... } })
如果你偏好通过require这样的形式 你也可以这样引入:
const { validationMixin, default: Vuelidate } = require('vuelidate') const { required, minLength } = require('vuelidate/lib/validators')
2.使用
其实使用起来真的很方便 下面举例来说就是在我的项目里的使用
1.注册验证
在用户注册时 我们通常的需要处理的表单字段就是name,email,password,confirm_pwd
首先我在Register.vue这个组件文件中把基本的样式结构写好 这取决于每个人
接着是我们对表单数据的验证:
这里是对用户名和邮箱的验证 就像之前提到的 我们先引入我们的验证规则:
import { required,minLength,between,email } from 'vuelidate/lib/validators'
因为我是对一个新用户的注册 所以我定义一个data
data(){ return{ newUser: { name:'', email:'', password:'', confirm_pwd:'' }, } },
接着去定义我们的验证字段的规则:
validations: { newUser:{ name: { required, minLength: minLength(2) }, email: { required,email } } },
定义这些验证规则之后 下面是我的html部分内容
<div v-bind:class="{ 'form-group--error': $v.newUser.name.$error }"> <label>用户名</label> <el-input placeholder="请输入你的用户名" v-model.trim="newUser.name" @input="$v.newUser.name.$touch()" > </el-input> </div> <span v-if="!$v.newUser.name.required">用户名不能为空</span> <span v-if="!$v.newUser.name.minLength">用户名不能太短</span> <div v-bind:class="{ 'form-group--error': $v.newUser.email.$error }"> <label>邮箱</label> <el-input placeholder="请输入你的邮箱" v-model.trim="newUser.email" @input="$v.newUser.email.$touch()" > </el-input> </div> <span v-if="!$v.newUser.email.required">邮箱不能为空</span> <span v-if="!$v.newUser.email.email">请填写正确的邮箱格式</span>
每个人可以都不一样 官方文档上也给出了demo:
<div> <div v-bind:class="{ 'form-group--error': $v.flatA.$error }"> <label>Flat A</label> <input v-model.trim="flatA" @input="$v.flatA.$touch()"> </div><span v-if="!$v.flatA.required">Field is required.</span> <div v-bind:class="{ 'form-group--error': $v.flatB.$error }"> <label>Flat B</label> <input v-model.trim="flatB" @input="$v.flatB.$touch()"> </div><span v-if="!$v.flatB.required">Field is required.</span> <div v-bind:class="{ 'form-group--error': $v.forGroup.nested.$error }"> <label>Nested field</label> <input v-model.trim="forGroup.nested" @input="$v.forGroup.nested.$touch()"> </div><span v-if="!$v.forGroup.nested.required">Field is required.</span> <div v-bind:class="{ 'form-group--error': $v.validationGroup.$error }"></div><span v-if="$v.validationGroup.$error">Group is invalid.</span> <pre>validationGroup: {{ $v.validationGroup }}</pre> </div>
我们先这样举例 值得注意的是我们需要去知道他的$v.name里面的内容
也就是 $invalid $dirty $error $pending $each 这个value
特别的注意 $error里的解释：It is a shorthand to $invalid && $dirty
也就是一个与的组合 你可以去试着改变这两者的值 再去看$error的值
当然还有两个重要的方法: $touch $reset 上面也有实例 说简单点就是设置这个以及子节点的$dirty 为true或者false
而设置这个$dirty 再结合 $invalid就可以判断验证成功与否
$error 是由$dirty和$invalid共同决定的
在这里的验证规则流程是这样的 如果$error为true那么form-group会添加一个form-group--error这个class
只有在$error为true时 如果你不符合任意一个验证规则 例如不符合required 那么就会提示验证失败
如果验证错误就给出错误提示 这是我的错误样式: