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
}

相关网址

• github地址

• package官网