ElementUI----validator表單校驗(yàn)
為表單控件提供校驗(yàn)規(guī)則
上面首先要有一個(gè)對(duì)象摩疑，進(jìn)行數(shù)據(jù)綁定
我們有多少個(gè)控件，就要進(jìn)行多少個(gè)數(shù)據(jù)綁定
接下來垢油，我們定義校驗(yàn)規(guī)則
這個(gè)校驗(yàn)規(guī)則一定是要和數(shù)據(jù)同名的壕探；
ref：類似于id，唯一標(biāo)識(shí)
:model="user"与倡，數(shù)據(jù)綁定
:rules="formRules"界逛，注入校驗(yàn)規(guī)則
prop：子組件?通過?prop?接受數(shù)據(jù)
label：為顯示得內(nèi)容名字
radio單選框，:label="1"
checkbox復(fù)選框纺座，:label="1"
select選擇器息拜，:value="1" ， label為顯示得內(nèi)容名字
required：true净响，要求不能為空
trigger：”blur“少欺，觸發(fā)方法
單擊事件得時(shí)候，再一次進(jìn)行校驗(yàn)
```
????????<template>
??????????<div?class="login">
????????????<el-form
??????????????ref="loginForm"
??????????????:model="user"
??????????????label-width="180px"
??????????????label-position="top"
??????????????size="mini"
??????????:rules="formRules"
????>?<!--?:rules="formRules"?注入校驗(yàn)規(guī)則-->
????<!--?子組件?通過?prop?接受數(shù)據(jù)?-->
??????<el-form-item?label="用戶名"?prop="username">
????????<el-input?v-model="user.username"?placeholder="請(qǐng)輸入用戶名"></el-input>
??????</el-form-item>
??????<el-form-item?label="密碼"?prop="password">
????????<el-input?v-model="user.password"?type="password"?placeholder="請(qǐng)輸入密碼"></el-input>
??????</el-form-item>
??????<el-form-item>
????????<el-button?type="primary"?@click="handleSubmit">登陸</el-button>
??????</el-form-item>
????</el-form>
??</div>
</template>
<script>
export?default?{
??name:?"Login",
??data()?{
????return?{
??????user:?{
????????username:?"",
????????password:?"",
??????},
??????//?注意：校驗(yàn)規(guī)則屬性馋贤，要和赞别，數(shù)據(jù)屬性名，一致
??????formRules:?{
????????username:?[
??????????{
????????????required:?true,?//?表示這一項(xiàng)必須不能為空
????????????message:?"用戶名不能為空",?//?如果違反了這個(gè)規(guī)則配乓，錯(cuò)誤提醒
????????????trigger:?"blur",?//?何時(shí)去執(zhí)行這個(gè)校驗(yàn)?zāi)胤绿希裁词录聢?zhí)行這個(gè)校驗(yàn)?zāi)兀?>?失去焦點(diǎn)得時(shí)候（什么時(shí)候觸發(fā)，失去焦點(diǎn)得時(shí)候）
??????????},?//?具體校驗(yàn)項(xiàng)
??????????{
????????????min:?3,
????????????max:?5,
????????????message:?"用戶名長(zhǎng)度在3~5個(gè)字符間",
????????????trigger:?"blur",
??????????},
????????],?//?數(shù)組類型
????????password:?[
??????????{?required:?true,?message:?"密碼不能為空",?trigger:?"blur"?},
????????],
??????},
????};
??},
??methods:?{
????handleSubmit()?{
??????//?發(fā)起登陸請(qǐng)求前犹芹，再次進(jìn)行表單校驗(yàn)
??????//?先獲取表單對(duì)象崎页，然后執(zhí)行校驗(yàn)方法?=>?ref，類似于id的存在
??????this.$refs["loginForm"].validate((valid)?=>?{
????????//?valid表示校驗(yàn)結(jié)果腰埂，true校驗(yàn)通過飒焦，false校驗(yàn)失敗
????????if?(valid)?{
??????????alert("校驗(yàn)通過，可以發(fā)起請(qǐng)求");
????????}?else?{
??????????alert("校驗(yàn)失敗屿笼，不可以發(fā)起請(qǐng)求");
????????}
??????});?//?獲取表單的ref屬性值牺荠，這個(gè)方法需要一個(gè)回調(diào)函數(shù)翁巍，validate自動(dòng)執(zhí)行校驗(yàn)，志电，
????},
??},
};
</script>
