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