<style type="text/css"> /* el-form-item__content 是input外层最大的div*/ .huo-dong .el-form-item__content{ width: 217px; } </style> <body> <div id="app"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name" class="huo-dong"> <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> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: '#app', 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(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }) </script>
总结表单验证：
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。（重要）
在element-ui中 搜集表单 都是放在一个对象（ruleForm）里面的哦。有利于维护和保存。
ref="ruleForm" ruleForm是搜集数据的哪一个对象
label-width="80px" 表示label的宽度
<el-button @click="resetForm('ruleForm')">重置</el-button> ruleForm是搜集数据的哪一个对象
