话不多说,直接上代码。
<Form width="500px" ref="bondData" :rules="ruleValidate" :model="formData">
<FormItem :label="退款金额:" style="" prop="amount">
<Input
v-model="formData.amount"
@on-keyup="keyUp($event, 'amount',true)"
placeholder="不可超过剩余金额"
style="width: 300px;margin-right:20px;"
/>
</FormItem>
</Form>
<script>
export default {
data () {
const validateNumber = (rule, val, callback, message) => {
if (val !== "") {
return callback();
}
return callback(new Error(message));
};
return {
ruleValidate: {
amount: [{ required: true, validator: validateNumber, message: "请输入退款金额", trigger: "blur" }],
}
}
},
mothods:{
keyUp(e, key, money) {
// 如果是删除为空 则不处理
if (!this.formData[key]) {
return (this.formData[key] = "");
}
// 每次抬键处理,对应金额渲染两位小数||数字
let num = "";
if (money) {
num = this.formData[key].match(/^\d*(\.?\d{0,2})/g)[0];
} else {
num = this.formData[key].replace(/^[^\d]+$/g, "").split('.')[0];
}
this.formData[key] = `${num}`;
},
}
}
</script>
另一种方法:
<Input v-model="pageNum" @input="change" placeholder="请输入内容" />
change(val) {
val = val.replace(/(^\s*)|(\s*$)/g, "")
if(!val) {
this.pageNum = "";
return
}
var reg = /[^\d.]/g
// 只能是数字和小数点,不能是其他输入
val = val.replace(reg, "")
// 保证第一位只能是数字,不能是点
val = val.replace(/^\./g, "");
// 小数只能出现1位
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
// 小数点后面保留2位
val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
this.pageNum = val;
}