<van-field>判断数字大于10小于100,保留2位小数点。建议使用 :formatter 代替 @input=“numberFixedDigit”。
方法一:使用@input=“numberFixedDigit”。
这种方式不建议。因为@input是实时校验的,体验不好。 建议是onBlur的时候,才去校验。
<van-field
v-model="curValue"
label="充值金额"
placeholder="请输入充值金额"
type="number"
input-align="right"
@input="numberFixedDigit"
/>
/**
* 格式化输入金额
* @param e
*/
function numberFixedDigit(e) {
e.target.value = e.target.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
e.target.value = e.target.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
e.target.value = e.target.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
e.target.value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
e.target.value = e.target.value.replace(/^\./g, ''); //首位不能输入“.”
if (e.target.value.indexOf(".") < 0 && e.target.value != "") {//如果没有小数点,首位不能为0,如01、02...
e.target.value = parseFloat(e.target.value);
}
nextTick(() => {
curValue.value = e.target.value
})
}
方法二:建议使用:formatter=”myFormatter”
格式化输入内容
通过 formatter 属性可以对输入的内容进行格式化,通过 format-trigger 属性可以指定执行格式化的时机,默认在输入时进行格式化。
<van-field
v-model="value1"
label="文本"
:formatter="formatter"
placeholder="在输入时执行格式化"
/>
<van-field
v-model="value2"
label="文本"
:formatter="formatter"
format-trigger="onBlur"
placeholder="在失焦时执行格式化"
/>
export default {
data() {
return {
value1: '',
value2: '',
};
},
methods: {
formatter(value) {
// 过滤输入的数字
return value.replace(/\d/g, '');
},
},
};
注意: format-trigger="onBlur" 在失去焦点时才执行格式化。
<van-field :formatter="myFormatter" format-trigger="onBlur" v-model="myVal">
myFormatter(value) {
value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
value = value.replace(/^\./g, ''); //首位不能输入“.”
if (value.indexOf(".") < 0 && value != "") {//如果没有小数点,首位不能为0,如01、02...
value = parseFloat(value);
}
if (parseFloat(value) < 10 || parseFloat(value) >= 100) {
this.$message.error({ message: '需要大于等于10,且小于100'});
this.$nextTick(() => {
this.myVal = "";
});
return;
}
// 注意::formatter需要最终return value。
return value;
}
用:formatter的好处是可以在onBlur失去焦点的时候才执行格式化。



没有回复内容