这篇文章将为大家详细讲解有关vuelidate对于vueJs2.0验证的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
介绍
在后端项目里 比如我们的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部分内容
