詳解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數字
{ 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個以內字符' }]" />
在安卓手機上可以正常校驗，但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個以內字符' }]" />
validator(val) {
return val.replace(/\s/g, '').length > 7 ? false : true
}
到此這篇關于vant2 自動檢查表單驗證 -validate的文章就介紹到這了,更多相關vant2 表單驗證內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React報錯Function?components?cannot?have?string?refs
這篇文章主要為大家介紹了React報錯Function?components?cannot?have?string?refs解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結,具有一定的參考價值,感興趣的可以了解一下2023-10-10
jsx就是javsscript與xml結合的一種格式，是js語法的一種擴展，只要把html代碼寫在js中就是jsx。react中定義組件有3種寫法：函數的方式、es5的寫法、es6（類）的寫法2022-08-08
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了關于hooks中useEffect()的使用總結,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
現在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發(fā)深深的吸引了我，下面來跟我一起領略ReactJs的風采吧~~ 文章有點長，耐心讀完，你會有很大收獲哦2021-04-04
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
中間件就是一個函數，對store.dispatch方法進行了改造，在發(fā)出 Action 和執(zhí)行 Reducer 這兩步之間，添加了其他功能，要理解中間件，關鍵點是要知道，這個中間件是連接哪些部分的軟件，它在中間做了什么事，提供了什么服務2023-01-01
React tabIndex使非表單元素支持focus和blur事件
這篇文章主要為大家介紹了React使用tabIndex使非表單元素支持focus和blur事件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
React useMemo和useCallback的使用場景
這篇文章主要介紹了React useMemo和useCallback的使用場景，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04