在使用vue2開發項目的時候使用element組件的el-form大多數情況都需要用到必填項校驗
舉個栗子：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {return {ruleForm: {name: '',region: '',},rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動區域', trigger: 'change' }],}};},methods: {submitForm(ruleForm) {this.$refs[ruleForm].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(ruleForm) {this.$refs[ruleForm].resetFields();}}}
</script>

這里我們的表單里有‘活動名稱(輸入框)’和‘活動區域(下拉框)’兩個選項，我們在<el-form>這里寫了

:rules="rules"

這就代表我們這個el-form表單的校驗是根據rules來的，而在下面<el-form-item>里我們寫了'prop="xxx"',這里的屬性為rules里需要校驗的字段名,也就是data里定義的

rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動區域', trigger: 'change' }],}

*這里需要注意的是我們prop里的字段和rules里的字段名一定要對應上，這樣el-form表單的校驗才會生效

然后我們在點擊確定的時候調方法進行校驗即可

this.$refs[ruleForm].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});

這里的[ruleForm]要跟上面el-form表單的ref的命名保持一致

更新：

如果遇到需要動態加校驗
我們只需要在el-form-item這里加上

:rules="定義的變量 ? rules.name : []"

像這樣

  <el-form-item label="活動名稱" prop="name":rules="定義的變量 ? rules.name: []"><el-input v-model="ruleForm.name"></el-input></el-form-item>

這個定義的變量是用來動態判斷是否需要加校驗的，這個值你只需要放在你需要判斷是否需要加校驗的地方就行了

*這里有個點需要注意，單獨加的校驗有可能會在你輸入/選擇選項之后還是提示校驗未通過

這個時候我們需要在輸入框/下拉框的change事件里再單獨執行一下校驗就可以了，比如像這樣：

change方法名() {this.$refs.ruleForm.validateField('name'); // 需要判斷的那個選項的prop，要對應rules里定義的值},

這樣就實現了對一個選項動態加判斷校驗

附加element的官網地址：Element - The world's most popular Vue UI framework