真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

vue+VeeValidate校驗(yàn)范圍的示例分析

這篇文章主要為大家展示了“vue+VeeValidate校驗(yàn)范圍的示例分析”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue+VeeValidate校驗(yàn)范圍的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)建站網(wǎng)絡(luò)公司擁有十年的成都網(wǎng)站開(kāi)發(fā)建設(shè)經(jīng)驗(yàn),上千多家客戶的共同信賴(lài)。提供成都做網(wǎng)站、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)、網(wǎng)站定制、賣(mài)鏈接、建網(wǎng)站、網(wǎng)站搭建、成都響應(yīng)式網(wǎng)站建設(shè)公司、網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格,提供周到的售前咨詢(xún)和貼心的售后服務(wù)

主要是兩個(gè)場(chǎng)景:

1. 校驗(yàn)范圍內(nèi),所有的字段。

2. 校驗(yàn)全局所有字段。

主要方法:

1.validate(fields, scope)     

2. validateAll(fields)

場(chǎng)景: 遍歷得到多個(gè)列表,每一個(gè)列表都可以獨(dú)立保存當(dāng)前列表。在保存當(dāng)前列表的時(shí)候,需要校驗(yàn)當(dāng)前列表輸入框的合法性。

代碼:


    
     
      車(chē)牌號(hào): {{p1.planLicenseNo}}
      司機(jī):{{p1.planDriver}}
     
     
                    實(shí)際車(chē)牌號(hào) *                {{ errors.first('licenseNo' + index, 'newsletter' + index) }}       
              實(shí)際數(shù)量(頭)*                {{ errors.first('actualQty' + index, 'newsletter' + index) }}       
                              {{ errors.first('actualWgh' + index, 'newsletter' + index) }}                                                        保存               

* carList: [{}, {}]

* data-vv-scope: [type='string']  屬性的值的類(lèi)型是 string,表示定義了一個(gè)區(qū)域,在校驗(yàn)的時(shí)候,通過(guò)屬性值 讓validator 可以找到當(dāng)前應(yīng)該校驗(yàn)的區(qū)域。

此時(shí)通過(guò) 驗(yàn)證器提供的方法validate(scopeName)就可以校驗(yàn)當(dāng)前區(qū)域了。

doSave (obj, i) {
    var _self = this
    var validateScope = 'newsletter' + i
    this.$validator.validate(validateScope + '.*').then((result) => {
     if (result) {
      // 提交數(shù)據(jù)
      _self.doSaveAfterCheck()
     }
    })
   }

/*
errors.has(field, scope) 返回一個(gè)true / false
errors.has('actualWgh' + index, 'newsletter' + index)}" 表示驗(yàn)證區(qū)域是 data-vv-scope = 'newsletter' + index 驗(yàn)證的字段是屬性 name ='actualWgh' + index
first(field,scope) 返回與特定字段關(guān)聯(lián)或由選擇器指定的第一條錯(cuò)誤消息,前提是作用域?qū)⒉檎以摲秶鷥?nèi)的消息,
*/
 
 
 
 {{ errors.first('actualWgh' + index, 'newsletter' + index) }}

場(chǎng)景2 : 頁(yè)面有多個(gè)校驗(yàn)。當(dāng)保存的時(shí)候,需要全部校驗(yàn)。這個(gè)場(chǎng)景官方提供2種方法.

this.$validator.validate().then((result) => {
    if (result) {
     // 提交數(shù)據(jù)。
      //   result是一個(gè)boolean值。true 表示沒(méi)有觸發(fā)錯(cuò)誤規(guī)則,false 表示頁(yè)面有非法值,觸發(fā)錯(cuò)誤
     _self.doSaveAfterCheck()
    }
   })

this.$validator.validateAll().then((result) => {
    if (result) {
     // 提交數(shù)據(jù)。
     _self.doSaveAfterCheck()
    }
   })

上述兩種校驗(yàn)全部的方法不同點(diǎn)在于適用場(chǎng)景:

vue+VeeValidate校驗(yàn)范圍的示例分析

validate() 可以指定校驗(yàn)范圍內(nèi),或者是全局的 字段。而validateAll() 只能校驗(yàn)全局。

官方示例:

// validate all fields.
//  校驗(yàn)全局范圍所有字段
validator.validate(); === validateAll() 兩個(gè)方法完全一樣。
// validate a field that has a matching name with the provided selector.
// 校驗(yàn)?zāi)膫€(gè)字段? field 取name的值。
validator.validate('field');
// validate a field within a scope.
// 校驗(yàn) 某個(gè)域內(nèi) 的某個(gè)字段。
validator.validate('scope.field');
// validate all fields within this scope.
// 校驗(yàn) 某個(gè)域內(nèi)的所有字段。  上述例子就是用的這個(gè)。  *_* 
validator.validate('scope.*');
// validate all fields without a scope.
// 校驗(yàn)沒(méi)有定義域內(nèi)的 字段。適用場(chǎng)景: 校驗(yàn)場(chǎng)景分為兩種: 定義域的,沒(méi)有定義域。
//  當(dāng)頁(yè)面所有需要校驗(yàn)的字段,都定義了域,則這個(gè)方法會(huì)導(dǎo)致沒(méi)有可校驗(yàn)的值,直接返回true
validator.validate('*');

以上是“vue+VeeValidate校驗(yàn)范圍的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


網(wǎng)頁(yè)標(biāo)題:vue+VeeValidate校驗(yàn)范圍的示例分析
網(wǎng)站鏈接:http://weahome.cn/article/psccgd.html

在線咨詢(xún)

微信咨詢(xún)

電話咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部