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;
}
});
}
最后上图：
将需要提交的数据打印出来，看看提交过去的东西是否有数据
然后就没啦·······心累啊~（悄悄的等待下一个坑）