vee-validate 使用问题

一、校验规则

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

 <input type="text" v-validate="'between:1,5'" data-vv-as="内容" name="test_name1"/>测试代码between
<span style="color: red;font-size: 1vh">{{ errors.first('test_name1')}}</span> <br>

<input type="text" v-validate="'length:4'" data-vv-as="内容" name="test_name2"/>测试代码length
 <span style="color: red;font-size: 1vh">{{ errors.first('test_name2')}}</span> <br>

image.png

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

二、校验相关属性

1、data-vv-scope

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

父组件代码

<input type="text" v-validate="'required'" name="parent_name"  data-vv-scope="validArea"/> 
<span style="color: red;font-size: 1vh">{{ errors.first('parent_name','validArea') }}</span>

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

子组件代码

<input type="text" v-validate="'required'" name="child_name"  data-vv-scope="validArea"/> 
<span style="color: red;font-size: 1vh">{{ errors.first('child_name','validArea') }}</span>

2、data-vv-as

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

<input type="text" v-validate="'required'" name="test_name"/>测试代码
<span style="color: red;font-size: 1vh">{{ errors.first('test_name') }}</span>

image.png image.png

使用后

 <input type="text" v-validate="'required'" data-vv-as="姓名" name="test_name1"/>测试代码1
<span style="color: red;font-size: 1vh">{{ errors.first('test_name1')}}</span> <br>

<input type="text" v-validate="'required'" data-vv-as="姓名" name="test_name2"/>测试代码2
 <span style="color: red;font-size: 1vh">{{ errors.first('test_name2')}}</span> <br>

<input type="text" v-validate="'required'" data-vv-as="姓名" name="test_name3"/>测试代码3
<span style="color: red;font-size: 1vh">{{ errors.first('test_name3')}}</span>

（1）单个输入框

image.png image.png

（2）多个输入框

image.png
image.png