vue VeeValidate校验范围实例详解（部分校验,全部校验)

搜索很久，没有发现有关于vue VeeValidate部分校验的。自己写一个。

主要是两个场景：

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

2.校验全局所有字段。

主要方法：

1 .验证（字段、范围)

2.验证所有（字段)

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

代码：

' div class=' col-xs-12 col-MD-6 col-LG-4 ' v-for='(P1，索引)在Carlist ' : key=' index ' div class=' box box box box-success ' style=' margin-top : 15px；'隐藏飞越：div class=' col-xs-7 ' style=' border-right :1 px solid # eee；填充-top : 10px；label class=' col-xs-12 ' style=' padd : 5px 0；'车牌号： span style=' font-weight : normal；“断字：断字”；{ { P1。planlicenseno } }/span/label label class=' col-xs-12 ' style=' padd : 5px 0；'司机：span style=' font-weight : normal；“断字：断字”；{ { P1。PlaN DRIVER } }/span/label/div class=' col-xs-5 ' style=' padding-top : 10px；'div class=' form-group ' : class=' { ' has-error ' :错误。具有('许可证号'索引，'时事通讯'索引)} '标签实际车牌号I class=' errMsg ' */I/label输入类型=' text ' class=' form-control ' v-model。特里姆=' P1。licenseNo ' v-validate=' {必需的d : true } ' : data-vv-scope='新闻稿index ' : name=' license no ' index ' : data-vv-as=' $ t '(页面字段。购买。汽车代码')' span v-show='错误。具有(' licenseNo '索引'新闻稿'实际数量（头)i class='errMsg'*/i/label输入类型=' text ' class=' form-control ' v-model。特里姆=' P1。实际数量' : data-vv-scope=' newslette ' index ' v-validate=' { required d : true，decimal:2，min _ value : 0 0 0，max _ value 3: p 1。计划数量} ' :名称='实际数量'索引' 3:数据-vv-as新闻稿"索引)} "标签总重(千克)I类=' ErrMSg ' */I/标签输入类型=' text ' class=' form-control ' v-model。特里姆=' P1。实际值' : data-vv-scope=' newslette ' index ' v-validate=' {必需d : true，decimal:2，min _ value : 0 0，max _ value 3: p 1。计划wgh } ' 3:名称='实际wgh '索引' 333:数据过磅单/label输入类型=' text ' class=' form-control ' v-model。特里姆=' P1。重量编号'/div/div class=' col-xs-12 text-right ' style=' border-top : 1px solid # eee；padd : 10px 15px ' button class=' BTN BTN-警告' @ click=' DoSave(P1，索引)'保存/button/div/div/div * carlist :[{ }，{}]

* data-vv-scope :[type=' string ']属性的值的类型是字符串，表示定义了一个区域，在校验的时候，通过属性值让验证器可以找到当前应该校验的区域。

此时通过验证器提供的方法验证（范围名称)就可以校验当前区域了。

doSave (obj，I){ var _ self=this var validateScope='简讯' i this。$ validator . validate(validate scope)。*').然后((result)={ if(result){//Commit data _ self . dosavefaftercheck()} })}/* errors . has(field，scope)返回一个true/false errors . has(' actual wgh ' index，The ' newslette ' index)} '表示验证区域为data-vv-scope=' newslette ' index，验证字段为属性名=' actualwgh' index first (field，scope)返回与特定字段相关联或由选择器指定的第一条错误消息。前提是作用域将在作用域内查找消息，*/div class=' form-group ' : class=' { ' has-error ' : errors . has(' actualWgh ' index，newslette ' index)} '标签总重量(kg) i class='errMsg'*/i/标签输入类型=' text ' class=' form-control ' v-model . trim=' p 1 . actualWgh ' 3360 data-vv-scope=' ' newslette ' index ' v-validate=' { 0第一('实际'索引，'时事通讯'索引)}}/span/div场景2:页面有多个验证。保存时，需要进行所有验证。这个场景官方提供了两种方法。

这个。$验证器。验证()。然后((result)={ if(result){//提交数据。//结果是布尔值。True表示没有触发错误规则，false表示页面有非法值，并触发error _ self。dosaveftercheck ()}})这一点。$验证器。validateall()。然后((result)={ if(result){//提交数据。_ self . dosavaftercheck()} })以上两种检查all的方法的区别在于适用的场景：

Validate()可以指定验证范围内或全局范围内的字段。而validateAll()只能验证全局。

官方示例：

//验证所有字段。//验证全局范围内的所有字段。验证()；===validateAll()这两种方法完全相同。//使用提供的选择器验证名称匹配的字段。//要验证哪个字段？该字段采用名称的值。validator . validate(' field ')；//验证范围内的字段。//验证字段中的字段。validator . validate(' scope . field ')；//验证此范围内的所有字段。//验证某个字段中的所有字段。这是上例中使用的。*_* validator.validate('作用域。*');//验证所有没有作用域的字段。//验证定义的字段中没有字段。适用场景：有两种验证场景：已定义域的和未定义域的。//当页面上所有需要验证的字段都已经定义了字段时，这个方法会导致没有可验证的值，所以会直接返回true validator . validate(' * ')；摘要

以上是边肖介绍的vue VeeValidate的验证范围的详细说明(部分验证、完全验证)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！