详解vuelidate 对于vueJs2.0的验证解决方案

更新时间：2017年03月09日 10:48:48 作者：JellyBean

本篇文章主要介绍了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部分内容

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.name.$error }">
<label class="control-label">用户名</label>
<el-input
    placeholder="请输入你的用户名"
    v-model.trim="newUser.name"
    @input="$v.newUser.name.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.name.required">用户名不能为空</span>
<span class="form-group__message" v-if="!$v.newUser.name.minLength">用户名不能太短</span>

<div class="control-group" v-bind:class="{ 'form-group--error': $v.newUser.email.$error }">
<label class="control-label">邮箱</label>
<el-input
    placeholder="请输入你的邮箱"
    v-model.trim="newUser.email"
    @input="$v.newUser.email.$touch()"
>
</el-input>
</div>
<span class="form-group__message" v-if="!$v.newUser.email.required">邮箱不能为空</span>
<span class="form-group__message" v-if="!$v.newUser.email.email">请填写正确的邮箱格式</span>

每个人可以都不一样官方文档上也给出了demo:

<div>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatA.$error }">
  <label class="form__label">Flat A</label>
  <input class="form__input" v-model.trim="flatA" @input="$v.flatA.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatA.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.flatB.$error }">
  <label class="form__label">Flat B</label>
  <input class="form__input" v-model.trim="flatB" @input="$v.flatB.$touch()">
 </div><span class="form-group__message" v-if="!$v.flatB.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.forGroup.nested.$error }">
  <label class="form__label">Nested field</label>
  <input class="form__input" v-model.trim="forGroup.nested" @input="$v.forGroup.nested.$touch()">
 </div><span class="form-group__message" v-if="!$v.forGroup.nested.required">Field is required.</span>
 <div class="form-group" v-bind:class="{ 'form-group--error': $v.validationGroup.$error }"></div><span class="form-group__message" 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 那么就会提示验证失败

如果验证错误就给出错误提示这是我的错误样式:

.form-group__message{
  display: none;
  font-size: .95rem;
  color: #CC3333;
  margin-left: 10em;
  margin-bottom: 12px;
}
.form-group--error+.form-group__message {
  display: block;
  color: #CC3333;
}

.form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea {
  border-color: #CC3333;
}

2.密码验证

密码验证其实和上面的差不多只不过他的验证规则时通过 sameAs 来进行验证的

3.组合验证

除了上面这些还有一个组合验证也就是如果任意一个不符合验证规则就不通过这个还是挺常用的

我们可以在验证字段这样去组合:

validations: {
  flatA: { required },
  flatB: { required },
  forGroup: {
   nested: { required }
  },
  validationGroup: ['flatA', 'flatB', 'forGroup.nested']
}

如果任意一个就是FlatA flatB forGroup其中一个不符合验证规则那么$v.validationGroup.$error就是false

4.异步验证

特别是在验证唯一性的时候我们肯定会遇到这样的一个场景:

就比如我们的邮箱如果已经注册过这个邮箱了那么再用这个邮箱去注册显然不是我们想要的

还有就是我们登录时我们需要去核对我们的用户的密码

这边我给出的实例就是对于用户名的注册如果已经注册了就会提示已经注册过

完全支持async/await语法。它与Fetch API结合使用也很出色那么我们可以通过后端API提供的结果可以进行判断
我们可以去增加我们唯一性的验证:

name: {
  required,
  minLength: minLength(4),
  async isUnique (value) {
    if (value === '') return true
    const response = await fetch(`http://localhost:8000/api/unique/name/${value}`)
    return Boolean(await response.json())
  }
},

这里我现在本地测试通过Laravel作为后端来提供的数据校验实际项目中的话可以再结合数据库

//用户验证路由
Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () {
  Route::get('/name/{value}',function(Request $request,$value){
    if($value==="gavin"){
      return response()->json(false);
    }
    return response()->json(true);
  });
});

如果我们去注册 gavin这个用户就会提示该昵称已经被注册因为在用户名我增加了isUnique验证

复制代码代码如下:

<span class="form-group__message" v-if="!$v.newUser.name.isUnique">用户名已经被注册</span>

显示结果应该是这样的:

5.自定义验证

同样的我们不仅可以使用它提供给我们的验证规则我们也可以自定义验证规则并与之前的进行组合

官方给出了一个简单实例:

export default value => {
 if (Array.isArray(value)) return !!value.length

 return value === undefined || value === null
  ? false
  : !!String(value).length
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用swiper实现左右滑动切换图片
这篇文章主要为大家详细介绍了vue使用swiper实现左右滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
Vue3中watch无法监听的解决办法
本文主要介绍了Vue3中watch无法监听的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Electron vue的使用教程图文详解
Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序。这篇文章主要介绍了electron-vue多显示屏下将新窗口投放是其他屏幕 ,需要的朋友可以参考下
2019-07-07
怎样在vue项目下添加ESLint的方法
这篇文章主要介绍了怎样在vue项目下添加ESLint的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
vue项目在webpack2实现移动端字体自适配功能
这篇文章主要介绍了vue项目在webpack2实现移动端字体自适配的相关知识，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
vue插值表达式和v-text指令的区别
这篇文章主要介绍了vue插值表达式和v-text指令的区别，{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式，下面来看看文章是怎么介绍该内容的吧,需要的朋友可以参考一下
2021-11-11
Vue快速实现通用表单验证功能
这篇文章主要介绍了Vue快速实现通用表单验证功能，本文通过一个小例子给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
详解Vue如何实现字母验证码
这篇文章主要为大家介绍了Vue如何实现字母验证码详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vue使用canvas手写输入识别中文
这篇文章主要介绍了vue使用canvas手写输入识别中文，工作时遇到一些项目如：系统上的输入法使用不方便，客户要求做一个嵌入web网页的手写输入法。下面我们来看看文章得具体描述吧
2021-11-11
详解Vue路由自动注入实践
这篇文章主要介绍了详解Vue路由自动注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04