表單驗證rules 綁定是規則 也可以自定義規則,:model是表單的數據源 el-form-item 標簽里面prop的名字要和數據源的名字一致,才能驗證生效 ;提交時調用this.$refs[formName].validate()方法,refs['這個值是和form標簽里面ref值要一致']
<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="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item>
<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>
<el-form-item label="活動形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </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: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' },
rules: {
name: [ { required: true, message: '請輸入活動名稱', trigger: 'blur' }, { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' } ],
resource: [ { required: true, message: '請選擇活動資源', trigger: 'change' } ],
desc: [ { required: true, message: '請填寫活動形式', trigger: 'blur' } ] } }; },
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => { if (valid) { alert('submit!');//這里一般調用提交接口
} else {
console.log('error submit!!'); return false; }//這個一般寫this.$message.error("填寫完整") 提醒用戶還有未填的或者填錯格式的
});
},
resetForm(formName) { this.$refs[formName].resetFields(); }
} } </script>