Vuelidate表單驗證規則

用到的技術 vue + quasar + vuelidate(**)

引用方法如下:

vue.

use(window.vuelidate.
default
)var minlength = window.validators.minlength
var required = window.validators.required 
var requiredif = window.validators.requiredif
var email = window.validators.email
var helpers = window.validators.helpers
validations:
,        
col19:
,                 
kitchentime:)}
}

icon=

"stay_primary_portrait"
:error=
"readonly == false? $v.baseinfoform.mobilephone.$error: false"
error-label=
"手機號碼不能為空"
//警告提示資訊
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"  
@blur=
"$v.baseinfoform.mobilephone.$touch"
:float-label=
"$t('手機號碼')"
type=
"number"
v-model=
"baseinfoform.mobilephone"
>
<
/q-input>
<
/q-field>
v-if
="baseinfoform.col19 == 'y' "
icon=
"access_time"
:error=
"readonly == false? $v.baseinfoform.kitchentime.$error: false"
error-label=
"進入廚電行業時間不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
type=
"date"
format=
"yyyy-mm-dd"
format-model=
"string"
:float-label=
"$t('若是,進入廚電行業時間')"
@blur=
"$v.baseinfoform.kitchentime.$touch"
v-model=
"baseinfoform.kitchentime"
>
<
/q-datetime>
<
/q-field>

5,具體**實現如下

"q-supplierbaseinfo" v-cloak>

icon=
"stay_primary_portrait"
:error=
"readonly == false? $v.baseinfoform.mobilephone.$error: false"
error-label=
"手機號碼不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"  
@blur=
"$v.baseinfoform.mobilephone.$touch"
:float-label=
"$t('手機號碼')"
type=
"number"
v-model=
"baseinfoform.mobilephone"
>
<
/q-input>
<
/q-field>
icon=
"work"
:error=
"readonly == false? $v.baseinfoform.col19.$error: false"
error-label=
"是否為**商不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
@blur=
"$v.baseinfoform.col19.$touch"
:float-label=
"$t('是否為**商')"
:options=
"col19options"
v-model=
"baseinfoform.col19"
>
<
/q-select>
<
/q-field>
<
/div>
// quasar components use
quasar.i18n.
set(quasar.i18n[
languge])
vue.
use(window.vuelidate.
default
)var minlength = window.validators.minlength
var required = window.validators.required
var requiredif = window.validators.requiredif
var helpers = window.validators.helpers
var supplierinvite =
newvue(,
],baseinfoform:},
validations:
,            
kitchentime:)}
}}})
<
/script>

Vue表單驗證控制項vuelidate

vuelidate控制項，可以方便的實現表單驗證功能。npm install vuelidate步驟一 main.js中引入vue touch 中引入 import vuelidate from vuelidate vue.use vuelidate 步驟二 引vue檔案中引入驗證項，如 impor...

好用的表單驗證工具 vuelidate

表單是使用者那裡收集的資料的工具。如果它沒有收集到你需要的資料，或者收集到的資料不對，那麼你的表單就沒有達到它的目的。這就是為什麼我們需要表單驗證。必要的資訊不能讓使用者提交空資訊 雖然不能保證使用者提交的資訊100 正確，但至少提交資訊的格式要保證正確 通過表單驗證控制一些元素的行為，比如資訊不正...

vuelidate框架自定義驗證規則 注意事項

官方文件 參考別人的用法 正規表示式規則 regex第乙個引數隨意,可用來標註正規表示式的條件 const username helpers.regex 使用者名稱必須是字母開頭,最少3位,最多16位 a za z w const mobile helpers.regex 手機號必須1開頭的11位數...