一、校验规则
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
