vue element ui 组件使用 -form 表单

表单验证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>