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 相关文章推荐
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
浅析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
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue如何从接口请求数据
2017/06/22 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python Property属性的2种用法
2015/06/21 Python
python 默认参数问题的陷阱
2016/02/29 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
python pandas生成时间列表
2019/06/29 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
详解基于python-django框架的支付宝支付案例
2019/09/23 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
html5与css3小应用
2013/04/03 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
列车乘务员工作不细心检讨书
2014/10/07 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
党小组考察意见
2015/06/02 职场文书
秋季运动会加油词
2015/07/18 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers