element ui 表單校驗

2021-10-08 20:21:10 字數 2926 閱讀 9307

一:最普通的驗證

html

:model=

"ruleform"

:rules=

"rules"

ref=

"ruleform"

label-width=

"100px"

class

="demo-ruleform"

>

"名稱:" prop=

"name"

>

v-model=

"ruleform.name"

>

<

/el-input>

<

/el-form-item>

<

/el-form>

js
export

default

, rules:,]

},};

},

二:自定義的基本驗證

html

:model=

"ruleform"

:rules=

"rules"

ref=

"ruleform"

label-width=

"100px"

class

="demo-ruleform"

>

"名稱:" prop=

"name"

>

v-model=

"ruleform.name"

>

<

/el-input>

<

/el-form-item>

<

/el-form>

js
export

default

, rules:,]

}}},

methods:

else},

}};

三:自定義的動態(可動態新增刪除表單)驗證

html

:model=

"ruleform"

:rules=

"rules"

ref=

"ruleform"

label-width=

"100px"

class

="demo-ruleform"

>

:key=

"key"

v-for=

"(list , key) in ruleform.namelist"

>

"名稱:"

:prop=

"'namelist.'+ key +'.name'"

:rules=

"rules.name"

>

v-model=

"list .name"

>

<

/el-input>

<

/el-form-item>

<

/div>

<

/el-form>

js
export

default]}

, rules:,]

}}},

methods:

else},

}};

四:是否必填取決於另外乙個場景的驗證

html

:model=

"ruleform"

:rules=

"rules"

ref=

"ruleform"

label-width=

"100px"

class

="demo-ruleform"

>

"年齡:" prop=

"age"

>

v-model=

"ruleform.age"

>

<

/el-input>

<

/el-form-item>

"名稱:" prop=

"name"

:rules=

"ruleform.age==1?:"

>

v-model=

"ruleform.name"

>

<

/el-input>

<

/el-form-item>

<

/el-form>

js
export

default,}

},methods:

else},

nname

(rule, value, callback)

else},

}};

五:強制觸發驗證&清除所有驗證
//強制觸發某個驗證

//例如:this.$refs.ruleform.validatefield("name");

this

.$refs.ruleform.

validatefield

("需要驗證的表單的prop傳的串");

//強制觸發所有驗證

this

.$refs.ruleform.

validate()

;//清除所有驗證

this

.$refs.ruleform.

resetfields()

;//清除某個表單的驗證

//例如:this.$refs.ruleform.validatefield("name");

this

.$refs.ruleform.

clearvalidate

("需要移除的表單的prop傳的串"

);

element ui 表單校驗

el form item繫結的prop必須和該item下的表單元素繫結的v model值的名稱一致。1.實現對乙個表單進行兩套或以上的驗證 花了一點時間摸索,我想 如果不像官方給的那樣,rules rules 然後在data下設定rules的值,而是把rules繫結乙個函式,這個函式在compute...

elementUI的表單校驗

參考 使用 只需要通過rules屬性傳入約定的驗證規則,並將 form item 的prop屬性設定為需校驗的欄位名即可。校驗規則參見 async validator 1.在from表單上配置屬性rules 2.資料模型中編寫校驗規則 pageformrules templateid pagenam...

element ui表單驗證

可以在pattern中書寫正則,並且配合elementui進行表單驗證。pattern 屬性規定用於驗證輸入欄位的模式。模式指的是正規表示式。rules message 以字母開頭,長度在2 5之間,只能包含字元 數字和下劃線 password message 只能輸入6 20個字母 數字 下劃線 ...