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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JavaScript继承方式实例
Oct 29 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
jquery实现上传图片功能
Jun 29 jQuery
浅析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 日常开发小技巧
2009/09/23 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
js实现图片上传预览原理分析
2017/07/13 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python里对list中的整数求平均并排序
2014/09/12 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
最新销售员个人自荐信
2013/09/21 职场文书
行政内勤岗位职责
2014/04/07 职场文书
环保倡议书100字
2014/05/15 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
三好生演讲稿
2014/09/12 职场文书