HTML 页面

1：首先在form里绑定：model    :rules     res   在item标签里用 prop=" 传指定义的名字" 来验证标签

<el-form label-width="140px" :model="staffinfoForm" :rules="editFormRules" ref="staffinfoForm">
                            <el-form-item label="商品名称：" class="first" prop="name">
                                <el-input type="text" placeholder="必胜客300元代金券" class="inputmoom" v-model='staffinfoForm.name'></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格：" class="first" prop="price">
                                <el-input type="text" placeholder="" class="inputmoom" v-model='staffinfoForm.price'></el-input>
                                <span class="goodsname"></span>
                            </el-form-item>
                            <el-form-item label="商品描述：" class="first" prop="remark">
                                <el-input type="text" placeholder="" class="inputmoom" v-model='staffinfoForm.remark'></el-input>

                            </el-form-item>

                            <el-form-item label="商品对象" prop="commdityTypeRelationid">

                                <el-checkbox-group v-model="staffinfoForm.commdityTypeRelationid" @change="handleCheckedCitiesChange">
                                    <el-checkbox label="送子女 " v-for='(items,index) in checked' :label='items.values' class="sendson">{{items.name}}</el-checkbox>

                                </el-checkbox-group>

                            </el-form-item>

                            <el-form-item label="数量：" class="first" prop="quantityCount">
                                <el-input type="text" placeholder="" class="inputmoom" v-model='staffinfoForm.quantityCount'></el-input>

                            </el-form-item>

                            <el-form-item label="来源商户：" prop="enterpriseId">
                                <el-select v-model="staffinfoForm.enterpriseId" placeholder="请选择" style="float: left;">
                                    <el-option v-for="(item,index) in moom" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-form>
                    </div>

 

JS部分

 

2：在这里首先定义表单的规则：

var name = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };
            var remark = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };
            var price = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };
            var commdityTypeRelationid = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };
            var enterpriseId = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };
            var quantityCount = (rule, value, callback) => {
                if(!value) {
                    return callback(new Error('不能为空'));
                } else {
                    return callback() // 一些同学的问题可能就出在这里
                }
            };

2：验证所需要提交的标签

        //验证表单
                editFormRules: {
                    name: [{
                        validator: name,
                        trigger: 'blur'
                    }],
                    remark: [{
                        validator: remark,
                        trigger: 'blur'
                    }],
                    quantityCount: [{
                        validator: quantityCount,
                        trigger: 'blur'
                    }],
                    price: [{
                        validator: price,
                        trigger: 'blur'
                    }],
                    enterpriseId: [{
                        validator: enterpriseId,
                        trigger: 'blur'
                    }],
                    commdityTypeRelationid: [{
                        validator: commdityTypeRelationid,
                        trigger: 'blur'
                    }]
                }

 

 

提交按钮

    //添加商品
            keep(staffinfoForm) {
                var that = this;
                this.$refs['staffinfoForm'].validate((valid) => {
                    if(valid) {
                        console.log('-------------success');
                        //console.log('-----------------添加商品提交的数据');
//                        console.log(that.type)
                        that.staffinfoForm.price = parseFloat(that.staffinfoForm.price);
                        that.staffinfoForm.enterpriseId = that.staffinfoForm.enterpriseId;
                        that.staffinfoForm.type = that.type;
                        console.log(that.staffinfoForm);
                        //return
                        that.$http(
                            "/commodity/addCommodity",
                            that.staffinfoForm,
                            'POST',
                            0
                        ).then(function(res) {

                            if(res.code == 200) {
                                alert("数据添加成功");
                                that.$router.go(-1)

                            }
                        });
                    } else {

                        console.log('-------------error');
                        return false;
                    }
                });
            }

 

 

最后上图：

将需要提交的数据打印出来，看看提交过去的东西是否有数据

 

 

然后就没啦·······心累啊~（悄悄的等待下一个坑）