對el-input輸入框的驗證,trigger的值選blur,即失去焦點時進行驗證。
下拉框(el-select)、日期選擇器(el-date-picker)、復選框(el-checkbox)、單選框(el-radio)的驗證時,trigger的值選擇change,即當值發生變化時就進行驗證。
下拉框的驗證:
<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> rules: { region: [ { required: true, message: '請選擇活動區域', trigger: 'change' } ] }
日期選擇器的驗證:
<el-form-item prop="date1"> <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker> </el-form-item>
date1: [ { type: 'date', required: true, message: '請選擇日期', trigger: 'change' } ],
復選框的驗證:
<el-form-item label="活動性質" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
<el-checkbox label="地推活動" name="type"></el-checkbox>
<el-checkbox label="線下主題活動" name="type"></el-checkbox>
<el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
type: [ { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' } ],
單選框的驗證:
<el-form-item label="特殊資源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="線上品牌商贊助"></el-radio>
<el-radio label="線下場地免費"></el-radio>
</el-radio-group>
</el-form-item>
resource: [ { required: true, message: '請選擇活動資源', trigger: 'change' } ],