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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
js中日期的加减法
May 06 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
JavaScript cookie原理及使用实例
May 08 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python如何实现视频转代码视频
2019/06/17 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
python实现简单的tcp 文件下载
2020/09/16 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
安全员岗位职责
2013/11/11 职场文书
个性车贴标语
2014/06/24 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python