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 並不是...