Vue Element實(shí)現(xiàn)校驗(yàn)validate的方法

發(fā)布時(shí)間：2020-11-02 16:53:10 來(lái)源：億速云閱讀：2855 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

Vue Element實(shí)現(xiàn)校驗(yàn)validate的方法？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

rules: {
  bannerType: [ { required: true, message: '請(qǐng)選擇類(lèi)型', trigger: 'change'} ],
  associateId: [ { required: true, message: '請(qǐng)選擇公告', trigger: 'change'} ],
  associateData: [ { required: true, type: 'url', message: '輸入合法的鏈接', trigger: 'change' } ]
}

限定輸入字符串的長(zhǎng)度

用min和max加以限制，element validate具體某個(gè)值后的限制規(guī)則是個(gè)數(shù)組，可以添加多個(gè)限制。

例子：

rules: {
  rewardReason: [
    { required: true, message: '請(qǐng)輸入加分原因', trigger: 'blur' },
    { max: 500, message: '不得超過(guò)500字符' }
  ]
}

限定輸入的數(shù)值介于某兩個(gè)值之間，即限定最大和最小輸入

也是通過(guò)min和max限定的，但是發(fā)現(xiàn)直接用不行，查了下輸入的時(shí)候el-input的v-model要加.number限制，即v-model.number。例子：

<el-input v-model.number="form.rewardToLevel"  placeholder="請(qǐng)輸入等級(jí)數(shù)字" type="number"></el-input>
 
rules: {
  rewardReason: [
    { required: true, message: '請(qǐng)輸入加分原因', trigger: 'blur' },
    { max: 500, message: '不得超過(guò)500字符' }
  ]
}

補(bǔ)充知識(shí)：vue組件庫(kù)element-ui 的validate方法

validate（）時(shí)elment-ui封裝好的用于對(duì)整個(gè)表單進(jìn)行驗(yàn)證

validate的參數(shù)是一個(gè)回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗(yàn)結(jié)束后被調(diào)用，是否校驗(yàn)成功和未通過(guò)校驗(yàn)的字段。

若不傳入回調(diào)函數(shù)，則會(huì)返回以promise

參數(shù)：Function( callback : Function( boolean,obj ) )

Vue Element實(shí)現(xiàn)校驗(yàn)validate的方法

isPass是布爾值，為true時(shí)表示校驗(yàn)通過(guò)。

Vue Element實(shí)現(xiàn)校驗(yàn)validate的方法

調(diào)用validate()校驗(yàn)時(shí)，需要prop屬性綁定校驗(yàn)項(xiàng)的字段名，如上圖所示。

如果prop屬性不綁定name這個(gè)字段名，表單校驗(yàn)時(shí)，不會(huì)校驗(yàn)變量ruleForm.name 的值。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

Vue Element實(shí)現(xiàn)校驗(yàn)validate的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽