vue element表單內容選填和必填

2021-10-20 05:04:14 字數 1355 閱讀 7130

動態繫結rules,若dataform.mobile為空,則不必填,反之,必填且遵循填寫規則

"手機號" prop=

"mobile"

:rules=

"dataform.mobile? datarule.mobile:"

>

"dataform.mobile" placeholder=

"請輸入11位手機號"

>

<

/el-input>

<

/el-form-item>

"身份證號" prop=

"identity"

:rules=

"dataform.identity? datarule.identity:"

>

"dataform.identity" placeholder=

"身份證號"

>

<

/el-input>

<

/el-form-item>

dataform.mobile等相關資料

data(),}}

對資料格式的限制

computed:],

mobile:[,

elseif(

!(/^1[3456789]\d$/

.test

(value)))

else},

trigger:

'change'}]

, identity:[,

elseif(

!(/(^[1-9]\d(18|19|([23]\d))\d((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d[0-9xx]$)|(^[1-9]\d\d((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d$)/

.test

(value)))

else},

trigger:

'change'}]}}}

若設定表單必填,把表單標籤內的繫結rules的內容刪去即可

效果如圖:

vue element表單驗證

簡單的輸入為空和輸入3 5個字元驗證 使用之後的隨筆 template部分 ruleform rules rules ref ruleform label width 100px class demo ruleform 姓名 prop name ruleform.name el input el f...

vue Element表單預驗證

表單完整 登陸表單 model form rules login rules ref form label width 0px class login form 使用者名稱 username v model form.username placeholder 請輸入賬號 prefix icon el...

vue element 動態表單驗證

公司最近的專案有個新增動態表單的需求,總結一下我在表單驗證上遇到的一些坑。如圖是功能的需求,這個功能挺好實現的,但是表單驗證真是耗費了我一些功夫。vue element在表單驗證上有一些限制,必須依照element示例的格式才能驗證通過。附上 1 el form model dynamicvalid...