vue Element表單預驗證

2021-10-09 03:01:18 字數 2070 閱讀 3674

表單完整**:

<

!-- 登陸表單 --

>

:model=

"form"

:rules=

"login_rules"

ref=

"form"

label-width=

"0px"

class

="login_form"

>

<

!-- 使用者名稱 --

>

"username"

>

v-model=

"form.username"

placeholder=

"請輸入賬號"

prefix-icon=

"el-icon-user"

>

<

/el-input>

<

/el-form-item>

<

!-- 密碼 --

>

"password"

>

v-model=

"form.password"

placeholder=

"請輸入密碼"

prefix-icon=

"el-icon-key"

type=

"password"

>

<

/el-input>

<

/el-form-item>

<

!-- 按鈕區域 --

>

="login_btns"

>

type=

"primary"

@click=

"submitform()"

round

>登陸<

/el-button>

type=

"info"

@click=

"resetform()"

round

>重制<

/el-button>

<

/el-form-item>

<

/el-form>

繫結的完整**

data()

, login_rules:,,

],password:[,

,],}

,};}

, methods:

else})

;},resetform()

},

先來看登陸表單

<

!-- 登陸表單 --

>

:model=

"form"

:rules=

"login_rules"

ref=

"form"

label-width=

"0px"

class

="login_form"

>

解析:

1.其中rules繫結login_rules 即

login_rules:,,

],password:[,

,],}

,

require: true 表明不弄為空 trigger:「blur」 為當失去焦點的時候檢驗

詳細編寫規則參考

中文翻譯的編寫規則

英文原文的編寫規則

2.其中ref即把本form放進$refs裡面,並且以login_rules命名

即:ref=「form」

在下面的**中引用方法:

this.$refs.form.***x操作

再看submitform

submitform()

else})

;},

this.$refs.form即剛剛在ref中放進的物件,可以直接引用

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 動態表單驗證

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

vue element 獲取驗證碼

我們在做乙個專案,登入註冊頁面是少不了的,為了人機校驗,驗證碼也是必須的 我的這個專案獲取驗證碼,前端傳送乙個隨機四位數給後端,後端返回一張,前端渲染就可以 驗證碼 5prefix icon lj icon yanzhengma 6autocomplete off 7autocapitalize o...