自定义验证规则:金额不能超过两位小数
html代码:
<el-form
:model="formData"
:rules="rules"
ref="msgForm"
label-width="120px"
>
<el-form-item label="商品名称:" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="商品价格:" prop="fee">
<el-input v-model="formData.fee"></el-input>
</el-form-item>
<el-form-item label="商品划线价:" prop="marking_fee">
<el-input v-model="formData.marking_fee"></el-input>
</el-form-item>
<el-form-item label="商品规格:">
<el-input v-model="formData.specifications"></el-input>
</el-form-item>
<el-form-item label="商品佣金:" prop="commission_fee">
<el-input v-model="formData.commission_fee"></el-input>
</el-form-item>
<el-form-item label="商品说明:">
<el-input
v-model="formData.description"
type="textarea"
maxlength="100"
show-word-limit
:autosize="{ minRows: 2 }"
placeholder="请输入商品说明"
></el-input>
</el-form-item>
</el-form>
<el-button @click="$router.go(-1)">返回</el-button>
<el-button type="primary" @click="submit" plain>保存</el-button>
js代码: ( vue
)
data() {
//自定义金额验证规则
let checkMoney = (rule, value, callback) => {
let regMoney = /^\d+(\.\d{1,2})?$/;
if (value && !regMoney.test(value)) {
callback(new Error("金额不能超过两位小数"));
} else {
return callback();
}
};
return {
formData: {
name: "",
fee: null,
marking_fee: null,
commission_fee: null,
},
rules: {
name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
fee: [
{ required: true, message: "请输入商品价格", trigger: "blur" },
{ validator: checkMoney, trigger: "blur" },
],
//使用自定义验证规则 validator 属性
marking_fee: [{ validator: checkMoney, trigger: "blur" }],
commission_fee: [{ validator: checkMoney, trigger: "blur" }],
},
};
},
methods:{
//表单验证
submit(){
this.$refs.msgForm.validate().then(valid()=>{
if(valid){
//提交表单
}else{
return false;
}
})
}
}