詳解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個以內字符' }]" />
在安卓手機上可以正常校驗,但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 Native使用axios進行網絡請求的方法
axios是一個基于Promise的Http網絡庫,可運行在瀏覽器端和Node.js中,Vue應用的網絡請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進行網絡請求,需要的朋友可以參考下2021-08-08

