在有的情況下，我們需要選擇性對表單移除部分校驗
我們可以看到element-ui上有乙個方法
但具體操作方法需要根據情況而定
我們可以先看下這次的效果
當我們選擇選項一時，選項二的表單被置灰，這時我們只對選項一的表單進行校驗，而不對選項二的表單進行校驗，所以這裡我們需要移除表單二的校驗（如果不移除，這裡仍然會對prop 的屬性進行校驗）
移除選項二校驗
移除選項一校驗
首先是表單的頁面**，在切換el-radio時會切換部分el-input的disabled
這裡繫結的校驗內容都是最基礎的校驗，rules的內容就不展示了
"changeform"
:rules=
"changerules" ref=
"changeform" label-width=
"100px" style=
"margin-left:5%"
>
"4" style=
"line-height:130px"
>
"1" v-model=
"radio"
>選項一<
/el-radio>
<
/el-col>
"16" style=
"border: 1px solid #e6e6e6;padding: 20px 20px 10px 0"
>
"必填項1" prop=
"name1"
>
"changeform.name1"
:disabled=
"radio===2"
>
<
/el-input>
<
/el-form-item>
"必填項2" prop=
"name2"
>
"changeform.name2"
:disabled=
"radio===2"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
<
/el-row>
"margin-top:10px"
>
"4" style=
"line-height:130px"
>
"2" v-model=
"radio"
>選項二<
/el-radio>
<
/el-col>
"16" style=
"border: 1px solid #e6e6e6;padding: 20px 20px 10px 0"
>
"必填項3" prop=
"name3"
>
"changeform.name3"
:disabled=
"radio===1"
>
<
/el-input>
<
/el-form-item>
"必填項4" prop=
"name4"
>
"changeform.name4"
:disabled=
"radio===1"
>
<
/el-input>
<
/el-form-item>
<
/el-col>
<
/el-row>
"margin: 20px 0 0 20px"
>
"primary" @click=
"submitchangeform"
>立即建立<
/el-button>
"resetform('changeform')"
>重置<
/el-button>
<
/el-form-item>
<
/el-form>
submitchangeform()
}elseif(
(valid ===
false
&& value.name3 && value.name4)
|| value.name1 || value.name2)
}elseif(
this
.radio ===2)
}elseif(
(valid ===
false
&& value.name1 && value.name2)
|| value.name3 || value.name4)}if
(valid)})
},
可以列印一下他們的值
valid為true才可以提交表單
而value是對校驗項的校驗內容value
首先再對應選項是選項一的情況下，判斷valid是否為false
（1）當表單的name1、name2滿足校驗條件且內容有效時，使valid=true，並且移除name3、name4的校驗，此時可以提交表單
（2）當表單的name1、name2不能同時滿足校驗條件時，這時valid仍為false，但是要移除name3、name4的校驗，仍然對name1、name2進行校驗
如果選擇選項二則是同樣的邏輯
在理解的基礎上對表單校驗進行優化
/** 提交移除部分校驗表單 */
submitchangeform()
}}elseif(
this
.radio ===2)
}}if(valid)})
},
前端基礎學習 移除表單校驗（二）
接上文表單校驗移除 上文的移除校驗用的element ui提到的clearvalidate方法 他們的必填標誌仍然存在 這一次我們通過required來移除校驗 可以看到我們在表單rules繫結的定義如下 changeform rules changerules ref changeform lab...
前端基礎 JQuery 簡單的表單校驗器
在頁面載入成功後獲取表單物件.validate 校驗規則 messages 自定義提示資訊 rules寫法 要校驗的name屬性 注意 多個校驗規則之間 使用,分割 message寫法 要校驗的name屬性 校驗器 required true false 必填校驗 number true false...
Vue elementUI學習 2 表單校驗
1 在 el form 上新增 rules rules 通過rules屬性傳入約定的驗證規則 2 給 el form item 新增屬性 props 名稱 3 在 data 中定義 rules 例子取自於官網 使用者名為自動校驗 其餘輸入框為自定義校驗。ruleform status icon ru...