詳解vant2 自動檢查表單驗(yàn)證 -validate
更新時間：2022年10月18日 09:37:40 作者：朱龍旭看世界
這篇文章主要介紹了vant2 自動檢查表單驗(yàn)證 -validate,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
下面給大家介紹下vant2 自動檢查表單驗(yàn)證 -validate
ref 給
<van-form @submit="onSubmit" ref="form"> 標(biāo)簽 ；
// 檢驗(yàn)手機(jī)號是否合格
await this.$refs.form.validate("mobile");data里面定義的規(guī)則 rules對象 ；
rules: {
mobile: [
// 必填
{ required: true, message: "請?zhí)顚懹脩裘? },
// 1 3-9 開頭 在家 9 個0-9數(shù)字
{ pattern: /^1[3-9]\d{9}$/, message: "手機(jī)號不正確" },
],
code: [
{ required: true, message: "請?zhí)顚懨艽a" },
{ pattern: /\d{6}$/, message: "驗(yàn)證碼錯誤" },
],
},使用規(guī)則：
<van-field
v-model="user.mobile"
name="mobile"
icon-prefix="zlx"
left-icon="shouji"
maxlength="11"
placeholder="請輸入手機(jī)號"
:rules="rules.mobile"
/>vant2表單組件Field在iOS上校驗(yàn)出錯
問題描述
需要校驗(yàn)用戶的輸入，長度超出進(jìn)行錯誤提示，所以使用了正則表達(dá)式進(jìn)行校驗(yàn)，代碼如下。
<van-field v-model="location" name="location" label="地點(diǎn)" placeholder="請輸入出差地" :rules="[{ required: true, pattern: /^\S{1,7}$/g, message: '請輸入7個以內(nèi)字符' }]" />
在安卓手機(jī)上可以正常校驗(yàn)，但iOS系統(tǒng)無論輸入幾個字符都會提示錯誤，原因可能是iOS輸入法會輸入特殊字符
解決方法
監(jiān)聽輸入，去掉其中的特殊字符再進(jìn)行判斷（實(shí)時校驗(yàn)）
watch: {
location(val) {
if (val.replace(/\s/g, '').length > 7) {
// 添加錯誤處理
// ....
Toast.fail('長度超出')
this.locationError = true
} else {
this.locationError = false
}
}
}
定義組件rules的validator方法（點(diǎn)擊提交時觸發(fā)校驗(yàn)）
<van-field v-model="location" name="location" label="地點(diǎn)" placeholder="請輸入出差地" :rules="[{ required: true, validator, message: '請輸入7個以內(nèi)字符' }]" />
validator(val) {
return val.replace(/\s/g, '').length > 7 ? false : true
}
到此這篇關(guān)于vant2 自動檢查表單驗(yàn)證 -validate的文章就介紹到這了,更多相關(guān)vant2 表單驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了useEffect中為什么不能使用async的原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Input標(biāo)簽自動校驗(yàn)功能去除實(shí)現(xiàn)
這篇文章主要為大家介紹了Input標(biāo)簽的自動拼寫檢查功能去除實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要給大家介紹了關(guān)于react中hook及使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了如何對react hooks進(jìn)行單元測試的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于React Native使用axios進(jìn)行網(wǎng)絡(luò)請求的方法
axios是一個基于Promise的Http網(wǎng)絡(luò)庫，可運(yùn)行在瀏覽器端和Node.js中，Vue應(yīng)用的網(wǎng)絡(luò)請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進(jìn)行網(wǎng)絡(luò)請求,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了React Navigation 路由傳參,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)自定義拖拽hook，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
以文本為例,為了實(shí)現(xiàn)無限循環(huán)的視覺效果,我們需要準(zhǔn)備兩段相同的文本,并讓第二段文本的頭部銜接在第一段文本的尾部,同時,為兩段文本設(shè)置相同的滾動動畫,本文給大家介紹了基于React實(shí)現(xiàn)無限滾動表格,需要的朋友可以參考下2023-11-11
在使用reactjs庫的時候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實(shí)現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了詳解各版本React路由的跳轉(zhuǎn)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05