element 表單驗證復用工具

2021-10-08 16:56:14 字數 1743 閱讀 4451

vue+elementui為了復用公共的表單驗證規則,將驗證抽取出來。

效果圖如下:

目錄結構如下圖:

在util中建立公共表單驗證規則regexp.js具體**如下:

const

checkmoney

=(rule, value, callback)

=>

)?$/if(

!myreg.

test

(value)

)else

}const

checkmoney99

=(rule, value, callback)

=>

else

}const

checkmoney999

=(rule, value, callback)

=>

else

}export

// ...其他的規則

隨後在需要使用到驗證的vue頁面引入:

="content-validate"

>

/h3>

"ruleform" status-icon :rules=

"rules" ref=

"ruleform" label-width=

"150px"

>

"小於99金額" prop=

"money99"

>

"text" v-model=

"ruleform.money99" clearable class

="inputwidth"

>

<

/el-input>

<

/el-form-item>

"小於999金額" prop=

"money999"

>

"text" v-model=

"ruleform.money999" clearable class

="inputwidth"

>

<

/el-input>

<

/el-form-item>

"success" @click=

"submitform" size=

"small"

>新增<

/el-button>

<

/el-form-item>

<

/el-form>

<

/div>

<

/template>

import

from

'@/utils/regexp.js'

export

default

, rules:,]

, money999:[,

]}}}

, methods:)}

})}}

}<

/script>

.content-validate

.inputwidth

<

/style>

element有關表單驗證

表單驗證的基礎是官網的api rules 位置放置在el form標籤當中 例如 rules formrules formrules則是放在data當中,其結構為 最後會附上一些相關例項 formrules phone message 請輸入正確的手機號 當然,其中的條件是多種多樣的,根據自己的專案...

Element表單驗證(2)

上篇講的是async validator的基本要素,那麼,如何使用到element中以及怎樣優雅地使用,就在本篇。上篇講到async validator由3大部分組成 基本驗證流程如下 上面中的validator.validate對應element中的this.refs refname valida...

element 多個表單同時驗證

做後台管理專案 最常見的就是 的驗證了 簡單的表單是很簡單的 如果涉及到 內部巢狀表單 多表單同時驗證時及其他複雜驗證時 就相對就有些棘手了 下面我們就先講一下 多表單同時驗證的情況 顯然 多表單就是乙個頁面同時使用多個表單 通常不多見 先看下使用場景吧 單獨的每個標籤模組 都是乙個form 並不是...