html部分
<el-form?:model="formData"?:rules="formRules"?ref="formRef"?label-width="60px"?class="demo-ruleForm">
????????????<el-form-item?label=""?prop="userName">
??????????????<el-input?v-model="formData.userName"?class="account"?placeholder="請輸入用戶名"?></el-input>
????????????</el-form-item>
????????????<el-form-item?label=""?prop="passWord"?>
??????????????<el-input?v-model="formData.passWord"??placeholder="請輸入密碼"?class="passWord"?type="password"></el-input>
????????????</el-form-item>
????????????<el-form-item?label="">
??????????????<el-checkbox-group?v-model="formData.checked">
????????????????<el-checkbox?label="記住密碼"?class="pwd_cz"></el-checkbox>
??????????????</el-checkbox-group>
????????????</el-form-item>
????????????<el-form-item>
??????????????<button?type="primary"??@click="submitForm('formData')"?class="sub_btn">登錄</button>
????????????</el-form-item>
??????????</el-form>
data部分:
data()?{
????return?{
??????formData:?{
????????userName:?"",
????????passWord:?"",
????????checked:?false,
??????},
??????formRules:?{
????????userName:?[{required:?true,message:?"請輸入用戶名稱",trigger:?"blur"}],
????????passWord:?[{required:?true,message:?"請輸入用戶密碼",trigger:?"blur"}],
??????}
????};
??},
函數(shù)部分：
submitForm(ruleForm)?{
??????console.log("refs:",?this.$refs.formRef);
??????let?that?=?this
??????this.$refs.formRef.validate((valid)?=>?{
????????console.log('valid',valid)
??????????if?(valid)?{
????????????that.handleLogin()
??????????}?else?{
????????????console.log('error?submit!!');
????????????return?false;
??????????}
????????});
????},
其中 :model連接的是data里的數(shù)據(jù)集，:rules連接的是data里的驗證規(guī)則集，ref用于給此組件命名便于之后函數(shù)使用獲取整個表單狀態(tài)用于判斷是否符合校驗規(guī)則，prop用于連接所對應(yīng)的校驗規(guī)則。
