vee-validate 使用问题

一、校验规则

1、使用between、length时，默认的错误提示消息在显示的时候，内容会出现如下问题

 测试代码between
{{ errors.first('test_name1')}} 


测试代码length
 {{ errors.first('test_name2')}} 

image.png

解决方案 ：使用其他属性替换(还有一种方式是重新写错误消息提示，其他方法目前还没想到，也怀疑是版本问题)
between：numeric|min_value:1|max_value:4
length: numeric|min:11|max:11

二、校验相关属性

1、data-vv-scope

说明：
2、data-vv-scope用于事件触发时，校验子父组件的中的相关字段，在要校验的字段中添加该属性

父组件代码

 
{{ errors.first('parent_name','validArea') }}

 // 提交
  subReport: function () {
        //提交事件触发时对‘validArea’范围内的所有字段进行校验
         this.$validator.validate('validArea.*').then((valid) => {
              if (!valid) {
                   // 如果无效，做一些提示
                   this.$layer.alert("请按要求填写正确内容！！！！");
              } 
        });
   },

子组件代码

 
{{ errors.first('child_name','validArea') }}

2、data-vv-as

说明：
1、验证插件默认会取name属性的值，作为错误信息显示，data-vv-as相当于给name属性重新自定义一个别名
2、name值必须唯一，data-vv-as值可以重复
使用前

测试代码
{{ errors.first('test_name') }}

image.png

image.png

使用后

 测试代码1
{{ errors.first('test_name1')}} 


测试代码2
 {{ errors.first('test_name2')}} 


测试代码3
{{ errors.first('test_name3')}}

（1）单个输入框

image.png

image.png

（2）多个输入框

image.png

image.png