vue+VeeValidate校验范围的示例分析

这篇文章主要为大家展示了“vue+VeeValidate校验范围的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue+VeeValidate校验范围的示例分析”这篇文章吧。

创新互联建站网络公司拥有十年的成都网站开发建设经验，上千多家客户的共同信赖。提供成都做网站、网站制作、网站开发、网站定制、卖链接、建网站、网站搭建、成都响应式网站建设公司、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

主要是两个场景：

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

2. 校验全局所有字段。

主要方法：

1.validate(fields, scope)

2. validateAll(fields)

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

代码：


    
     
      车牌号: {{p1.planLicenseNo}}
      司机：{{p1.planDriver}}

实际车牌号 *

实际数量(头)*

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）返回与特定字段关联或由选择器指定的第一条错误消息，前提是作用域将查找该范围内的消息, */ 总重(kg) *

this.$validator.validate().then((result) => { if (result) { // 提交数据。　　　　　　//　　 result是一个boolean值。true 表示没有触发错误规则，false 表示页面有非法值，触发错误 _self.doSaveAfterCheck() } }) this.$validator.validateAll().then((result) => { if (result) { // 提交数据。 _self.doSaveAfterCheck() } })

// 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校验范围的示例分析

其他资讯