antd input-number 数字输入正则校验
ant-design-vue 数字输入组件的常用校验方法
这里的格式是,只能输入数字或小数, 整数部分每三位添加一个逗号分隔符
可以把校验方法单独抽离出来放在公共的文件里,方便复用
一般有两种数字输入校验方法,
第一种是输入时,检测到输入内容不匹配,去掉不匹配的输入内容
第二种是,通过 form 表单的 rules 校验,不匹配的就提示输入内容不合格
antd 提供的 input-number 组件已经帮我们处理的不是数字输入的内容,基本只需要处理数字的展示和位数限制就可以了
如果不是用的 UI 组件或者使用的 UI 组件没有数字输入框,就需要自己校验
这里整理了两种输入组件,普通的 input 输入和 type=number 的 input 输入
要注意,type=number时,数字三位增加逗号,逗号是不能被显示的.所以需要处理,输入的时候type=number,鼠标移出展示的时候type=text
效果图:
完整代码:
<template>
<div>
<h3>原生输入框,输入数字(改变输入内容)</h3>
<div class="date-box">
<div class="item">
<h3>文本输入框,整数或小数</h3>
<a-input
:value="amount"
style="width: 70%"
@input="handleInput"
@blur="handleBlur"
></a-input>
</div>
<div class="item">
<h3>文本输入框,整数或小数,小数位数不超过两位</h3>
<a-input
:value="amount3"
style="width: 70%"
@input="handleInput3"
@blur="handleBlur3"
></a-input>
</div>
<div class="item">
<h3>type=number输入框,整数或小数</h3>
<a-input
:type="isEdit ? 'number' : 'text'"
:value="amount2"
@input="handleInput2"
@blur="handleBlur2"
@focus="handleFaucs2"
style="width: 70%"
></a-input>
</div>
</div>
<h3>数字输入组件(改变输入内容)</h3>
<p>inputnumber数字输入组件自带的会处理输入不是数字和输入多个小数点的情况</p>
<div class="date-box">
<div class="item">
<h3>数字输入,自动添加小数点</h3>
<a-input-number
:min="0"
:max="9999"
:precision="2"
style="width: 70%"
/>
</div>
<div class="item">
<h3>数字输入,每3位添加逗号分隔符,小数位数不超过2</h3>
<a-input-number
:min="0"
:max="9999999999"
:precision="2"
:formatter="numberFormat"
:parser="toNumberFormat"
style="width: 70%"
/>
</div>
<div class="item">
<h3>数字输入,每3位添加逗号分隔符,小数不处理</h3>
<a-input-number
:min="0"
:max="9999999999"
:formatter="numberDotFormat"
:parser="toNumberFormat"
style="width: 70%"
/>
</div>
</div>
<h3>数字输入组件(form表单校验提示)</h3>
<a-form
ref="formRef"
name="dynamic_form_item"
:model="info"
:rules="rules"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 17 }"
>
<div class="date-box">
<div class="item">
<h3>只能输入整数(四舍五入)</h3>
<a-form-item label="数字1" name="number1">
<a-input-number
v-model:value="info.number1"
:min="0"
:max="9999"
:precision="0"
style="width: 70%"
/>
</a-form-item>
</div>
<div class="item">
<h3>只能输入整数(不改变,提示)</h3>
<a-form-item label="数字2" name="number2">
<a-input-number
v-model:value="info.number2"
:min="0"
:max="9999"
style="width: 70%"
/>
</a-form-item>
</div>
<div class="item">
<h3>只能输入整数和小数,小数位数不超过3</h3>
<a-form-item label="数字3" name="number3">
<a-input-number
v-model:value="info.number3"
:min="0"
:max="9999"
style="width: 70%"
/>
</a-form-item>
</div>
</div>
<div><a-button type="primary" @click="submit">保存</a-button></div>
</a-form>
</div>
</template>
<script>
import {
numberFormat,
toNumberFormat,
numberDotFormat,
initNumberReg,
initDotNumberReg,
numberInputFormat,
numberInputFormat2,
} from "@/utils";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
export default {
name: "numberInput",
setup() {
const info = reactive({
number1: null,
number2: null,
number3: null,
});
const formRef = ref(null);
const rules = {
number1: [{ required: true, trigger: "blur", message: "请输入数字" }],
number2: [
{ required: true, trigger: "blur", message: "请输入数字" },
initNumberReg,
],
number3: [
{ required: true, trigger: "blur", message: "请输入数字" },
initDotNumberReg,
],
};
const submit = () => {
formRef.value.validateFields().then(() => {
console.log(info);
message.success("success");
});
};
const amount = ref(null);
const handleInput = (e) => {
const val = e.target.value;
amount.value = val;
};
const handleBlur = (e) => {
const val = e.target.value;
amount.value = numberInputFormat(val);
// console.log(amount.value);
};
const amount3 = ref(null);
const handleInput3 = (e) => {
const val = e.target.value;
amount3.value = val;
};
const handleBlur3 = (e) => {
const val = e.target.value;
amount3.value = numberInputFormat(val, 2);
// console.log(amount.value);
};
const amount2 = ref(null);
const isEdit = ref(true); // 是否是编辑状态
const handleInput2 = (e) => {
const val = e.target.value;
amount2.value = val;
};
const handleBlur2 = (e) => {
const val = e.target.value;
amount2.value = numberInputFormat2(val);
isEdit.value = false;
// console.log(amount.value);
};
const handleFaucs2 = () => {
amount2.value = toNumberFormat(amount2.value);
isEdit.value = true;
};
return {
numberFormat,
toNumberFormat,
numberDotFormat,
numberInputFormat,
numberInputFormat2,
info,
formRef,
rules,
submit,
amount,
handleInput,
handleBlur,
amount3,
handleInput3,
handleBlur3,
amount2,
isEdit,
handleInput2,
handleBlur2,
handleFaucs2,
};
},
};
</script>
<style scoped>
.date-box {
display: flex;
margin-bottom: 24px;
flex-wrap: wrap;
}
.date-box .item {
width: 45%;
margin-bottom: 12px;
}
</style>
通用的正则校验:
utils>index.js
// 常用数据转换 export const initDotReg = /\B(?=(\d{3})+(?!\d))/g; // 整数每3位添加逗号分隔符 export const floatDotReg = /(?!^)(?=(\d{3})+\.)/g; // 小数每3位添加逗号分隔符 // 数字输入,每3位添加逗号分隔符 export const numberFormat = (value) => { if (value) { return value.replace(initDotReg, ","); } else { return value; } }; // 去掉逗号 export const toNumberFormat = (value) => { if (value) { return value.replace(/\$\s?|(,*)/g, ""); } else { return value; } }; // 数字输入,每3位添加逗号分隔符,小数不处理 export const numberDotFormat = (value) => { if (value) { // 有小数点 if (String(value).indexOf(".") > 0) { return value.replace(floatDotReg, ","); } else { // 无小数点 return value.replace(initDotReg, ","); } } else { return value; } }; // 正则校验 // 只能输入整数 export const initNumberReg = { pattern: /^[1-9]+\d*$/, trigger: "blur", message: "只能输入整数", }; // 只能输入整数或小数 export const initDotNumberReg = { pattern: /^(0|[1-9])+(\.[0-9]{1,3}){0,1}$/, trigger: "blur", message: "只能输入整数或小数,小数位数不超过3", }; // 文本输入框, 数字输入,每3位添加逗号分隔符,只能输入一个小数点 // val:输入内容 dot:小数位数 export const numberInputFormat = (val, dot = 0) => { if (val) { const numberReg = /[^\d^\.]+/g; // 只保留数字和. const dotreg = /(\.+)*(\d{0,})\.(\.+)*(\d{0,}).*$/; // 只保留一个点. let value = val.replace(numberReg, "").replace(dotreg, "$2.$4"); // console.log(value); value = Number(value); if (isNaN(value)) return ""; value = String(value); // 有小数点 if (String(value).indexOf(".") > 0) { // console.log(value); if (dot) { const precisionReg = new RegExp("(\\d+)\\.(\\d{" + dot + "})(\\d+)*$"); // 输入小数个数限制 // const precisionReg = /^(\d+)\.(\d{2})(\d+)*$/; // 输入小数个数限制 value = value.replace(precisionReg, "$1.$2"); } return value.replace(floatDotReg, ","); } else { // 无小数点 return value.replace(initDotReg, ","); } } else { return val; } }; // type=number输入框, 数字输入,每3位添加逗号分隔符,只能输入一个小数点 export const numberInputFormat2 = (val) => { if (val) { let value = Number(val); value = String(value); // 有小数点 if (String(value).indexOf(".") > 0) { return value.replace(floatDotReg, ","); } else { // 无小数点 return value.replace(initDotReg, ","); } } else { return val; } };
