这里用的是el-form做的,因为el-form有验证提示的功能,:οninput="addPro.priceSell=addPro.priceSell.replace(/[^\d.]/g,’’)"是在非数字时清空input
<el-form
label-width="100px"
class="add-product-form"
ref="addProForm"
:rules="addProFormRules"
:model="addPro"
>
<el-form-item prop="priceSell" label="售价:" label-width="80px">
<el-input
:oninput="addPro.priceSell=addPro.priceSell.replace(/[^\d.]/g,'')"
v-model="addPro.priceSell"
clearable
width="80px"
></el-input>
</el-form-item>
</el-form>
接着我需要限制提示最终保留两位小数,利用el-form的validator,这里注意的是,el-form中的:model要和el-form-item的v-model以及prop相关联
export default{
data(){
let checkPriceSell = (rule, value, callback) => {
if (value) {
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
callback(new Error("最终保留两位小数"));
} else {
callback();
}
} else {
callback(new Error("请填写销售价格"));
}
};
return{
addProFormRules: {
priceSell: [
{ validator: checkPriceSell, trigger: "blur", required: true }
],
}
}
}
}