vue+VeeValidate 校验范围实例详解(部分校验,全部校验)


Posted in Javascript onOctober 19, 2018

搜索很久,没有发现有关于vue+VeeValidate部分校验的。自己写一个。

主要是两个场景:

1. 校验范围内,所有的字段。

2. 校验全局所有字段。

主要方法:

1.validate(fields, scope)     

2. validateAll(fields)

场景: 遍历得到多个列表,每一个列表都可以独立保存当前列表。在保存当前列表的时候,需要校验当前列表输入框的合法性。

代码:

<div class=" col-xs-12 col-md-6 col-lg-4" v-for="(p1,index) in carList" :key="index">
    <div class="box box-success" style="margin-top: 15px;overflow: hidden;" >
     <div class="col-xs-7" style="border-right:1px solid #eee;padding-top: 10px;">
      <label class="col-xs-12 " style="padding: 5px 0;">车牌号: <span style="font-weight: normal;word-break:break-all;">{{p1.planLicenseNo}}</span></label>
      <label class="col-xs-12" style="padding: 5px 0;;">司机:<span style="font-weight: normal;word-break:break-all;">{{p1.planDriver}}</span></label>
     
     </div>
     <div class="col-xs-5" style="padding-top: 10px;">
      <div class="form-group" :class="{'has-error': errors.has('licenseNo' + index, 'newsletter' + index)}">
       <label >实际车牌号 <i class="errMsg">*</i></label>
       <input type="text" class="form-control" v-model.trim="p1.licenseNo"
           v-validate="{required: true}" :data-vv-scope="'newsletter' + index"
           :name="'licenseNo' + index" :data-vv-as="$t('pagefield.purchase.carCode')">
       <span v-show="errors.has('licenseNo' + index, 'newsletter' + index)" class="help-block">{{ errors.first('licenseNo' + index, 'newsletter' + index) }}</span>
      </div>

      <div class="form-group" :class="{'has-error': errors.has('actualQty' + index, 'newsletter' + index)}">
       <label >实际数量(头)<i class="errMsg">*</i></label>
       <input type="text" class="form-control" v-model.trim="p1.actualQty" :data-vv-scope="'newsletter' + index"
           v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planQty}"
           :name="'actualQty' + index" :data-vv-as="$t('message.quantity')">
       <span v-show="errors.has('actualQty' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualQty' + index, 'newsletter' + index) }}</span>
      </div>
      <div class="form-group" :class="{'has-error': errors.has('actualWgh' + index, 'newsletter' + index)}">
       <label>总重(kg) <i class="errMsg">*</i></label>
       <input type="text" class="form-control" v-model.trim="p1.actualWgh" :data-vv-scope="'newsletter' + index"
           v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planWgh}"
           :name="'actualWgh' + index" :data-vv-as="$t('message.weight')">
       <span v-show="errors.has('actualWgh' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualWgh' + index, 'newsletter' + index) }}</span>
      </div>
      <div class="form-group">
       <label>过磅单</label>
       <input type="text" class="form-control" v-model.trim="p1.weightNo">
      </div>

     </div>
     <div class="col-xs-12 text-right" style="border-top: 1px solid #eee;padding: 10px 15px;">
      <button class="btn btn-warning" @click="doSave(p1, index)">保存</button>
     </div>
    </div>
   </div>

* carList: [{}, {}]

* data-vv-scope: [type='string']  属性的值的类型是 string,表示定义了一个区域,在校验的时候,通过属性值 让validator 可以找到当前应该校验的区域。

此时通过 验证器提供的方法validate(scopeName)就可以校验当前区域了。

doSave (obj, i) {
    var _self = this
    var validateScope = 'newsletter' + i
    this.$validator.validate(validateScope + '.*').then((result) => {
     if (result) {
      // 提交数据
      _self.doSaveAfterCheck()
     }
    })
   }

/*
errors.has(field, scope) 返回一个true / false
errors.has('actualWgh' + index, 'newsletter' + index)}" 表示验证区域是 data-vv-scope = 'newsletter' + index 验证的字段是属性 name ='actualWgh' + index
first(field,scope) 返回与特定字段关联或由选择器指定的第一条错误消息,前提是作用域将查找该范围内的消息,
*/
<div class="form-group" :class="{'has-error': errors.has('actualWgh' + index, 'newsletter' + index)}"> 
 <label>总重(kg) <i class="errMsg">*</i></label>
 <input type="text" class="form-control" v-model.trim="p1.actualWgh" :data-vv-scope="'newsletter' + index"
     v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planWgh}"
     :name="'actualWgh' + index" :data-vv-as="$t('message.weight')">
 <span v-show="errors.has('actualWgh' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualWgh' + index, 'newsletter' + index) }}</span>
</div>

场景2 : 页面有多个校验。当保存的时候,需要全部校验。这个场景官方提供2种方法.

this.$validator.validate().then((result) => {
    if (result) {
     // 提交数据。


//
 result是一个boolean值。true 表示没有触发错误规则,false 表示页面有非法值,触发错误
     _self.doSaveAfterCheck()
    }
   })

this.$validator.validateAll().then((result) => {
    if (result) {
     // 提交数据。
     _self.doSaveAfterCheck()
    }
   })

上述两种校验全部的方法不同点在于适用场景:

vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

validate() 可以指定校验范围内,或者是全局的 字段。而validateAll() 只能校验全局。

官方示例:

// validate all fields.
//校验全局范围所有字段
validator.validate(); === validateAll() 两个方法完全一样。
// validate a field that has a matching name with the provided selector.
// 校验哪个字段? field 取name的值。
validator.validate('field');
// validate a field within a scope.
// 校验 某个域内 的某个字段。
validator.validate('scope.field');
// validate all fields within this scope.
// 校验 某个域内的所有字段。  上述例子就是用的这个。  *_* 
validator.validate('scope.*');
// validate all fields without a scope.
// 校验没有定义域内的 字段。适用场景: 校验场景分为两种: 定义域的,没有定义域。
//
当页面所有需要校验的字段,都定义了域,则这个方法会导致没有可校验的值,直接返回true
validator.validate('*');

总结

以上所述是小编给大家介绍的vue+VeeValidate 校验范围实例详解(部分校验,全部校验),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
详解vue.js之props传递参数
Dec 12 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
详细介绍Next.js脚手架完整搭建封装
Apr 26 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 #Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 #Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 #Javascript
clipboard在vue中的使用的方法示例
Oct 19 #Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
You might like
PHP生成月历代码
2007/06/14 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
英文留学推荐信范文
2014/01/25 职场文书
委托书模板
2014/04/04 职场文书
招标承诺书
2014/08/30 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
单位提档介绍信
2015/10/22 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python