這篇文章主要為大家展示了“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)前列表輸入框的合法性。
代碼:
{{ errors.first('licenseNo' + index, 'newsletter' + index) }}{{ 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)景:
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è)資訊頻道!