1、驗證說明
ElementUI 的 Form 組件提供了表單驗證的功能,只需要通過 rules 屬性傳入約定的驗證規則,並在 Form-Item 的 prop 屬性設置爲需校驗的字段名即可
2、表單示例
<el-form :rules="rules" ref="dataForm" :model="dataForm">
<el-form-item label="用戶名" prop="userName">
<el-input v-model="userName"></el-input>
</el-form-item>
<el-form-item label="創建時間" prop="createTime">
<el-date-picker v-model="dataForm.createTime" type="datetime" placeholder="選擇時間" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</el-form-item>
<el-form-item label="用戶標籤" prop="labels">
<el-checkbox-group v-model="rdataForm.labels">
<el-checkbox label="活躍" name="labels"></el-checkbox>
<el-checkbox label="美食" name="labels"></el-checkbox>
<el-checkbox label="萌新" name="labels"></el-checkbox>
<el-checkbox label="次元" name="labels"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="用戶組" prop="group">
<el-radio-group v-model="dataForm.group">
<el-radio label="0">會員用戶</el-radio>
<el-radio label="1">普通用戶</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="狀態" prop="status">
<el-select v-model="ruleForm.region" placeholder="請選擇">
<el-option label="啓用" value="0"></el-option>
<el-option label="禁用" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="區域(級聯菜單)" prop="provinceId">
<el-select v-model="dataForm.provinceId" placeholder="省" @change="provinceChange">
<el-option v-for="item in provinces" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="cityId">
<el-select v-model="dataForm.cityId" placeholder="市" @change="cityChange">
<el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item prop="areaId">
<el-select v-model="dataForm.areaId" placeholder="區" @change="areaChange">
<el-option v-for="item in areas" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
3、驗證示例
rules: {
userName: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],
createTime: [{required: true, message: '請選擇日期', trigger: 'change' }],
labels: [{ required: true, message: '請至少選擇一個標籤', trigger: 'change' }],
group: [{ required: true, message: '請選擇用戶組', trigger: 'change' }],
status: [{ required: true, message: '請選擇狀態', trigger: 'change'}],
provinceId: [{ required: true, message: '請選擇省份', trigger: 'change' }],
cityId: [{ required: true, message: '請選擇城市', trigger: 'change' }],
areaId: [{ required: true, message: '請選擇區縣', trigger: 'change' }]
}
4、官網地址
https://element-cn.eleme.io/#/zh-CN/component/form