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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
微信小程序实现日历效果
Dec 28 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和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php获取文件大小的方法
2014/02/26 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
HTML的form表单和django的form表单
2019/07/25 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
《我为你骄傲》教学反思
2014/02/20 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
设计师求职信
2014/07/01 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL