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


Posted in Javascript onMarch 09, 2017

介绍

在后端项目里 比如我们的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>

显示结果应该是这样的:

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

5.自定义验证

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript宿主对象之window.navigator详解
Sep 07 Javascript
jquery append与appendTo方法比较
May 24 jQuery
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
小程序实现分类页
Jul 12 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
You might like
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP框架性能测试报告
2016/05/08 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
js中有关IE版本检测
2012/01/04 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
Python实现统计单词出现的个数
2015/05/28 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python 中Operator模块的使用
2021/01/30 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
教师年终个人自我评价
2013/10/04 职场文书
工地门卫岗位职责
2013/12/30 职场文书
求职信写作要突出重点
2014/01/01 职场文书
聚美优品广告词改编
2014/03/14 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
《落花生》教学反思
2016/02/16 职场文书