js 校验输入框只能输入数字与小数

### 限制HTML input输入框仅接受数字和小数点的实现方法 在实际开发中，可以通过正则表达式结合JavaScript来实现对HTML `input` 输入框的限制，确保用户只能输入数字和小数点，并且可以进一步控制小数点的数量以及小数位数。以下是几种常见的实现方式： #### 方法一：使用 `oninput` 属性结合正则表达式 通过在HTML中直接定义 `oninput` 属性，实时对用户输入的内容进行过滤。 ```html <input type="text" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" maxlength="16" /> ``` 上述代码实现了以下功能[^1]： - 只允许输入数字和小数点。 - 小数点后最多保留两位小数。 - 防止用户输入非法字符。 #### 方法二：结合 JavaScript 进行输入校验 如果需要更复杂的逻辑处理，可以使用JavaScript编写校验函数。 ```html <input type="text" id="numberInput" /> <script> document.getElementById('numberInput').addEventListener('input', function (e) { let value = e.target.value; // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } e.target.value = value; }); </script> ``` 该方法实现了以下功能[^2]： - 清除所有非数字和小数点的字符。 - 确保输入框中只有一个小数点。 - 限制小数点后最多两位小数。 #### 方法三：使用 Vue.js 的 `v-model` 和 `@input` 事件 在Vue.js项目中，可以通过 `v-model` 和 `@input` 事件来实现类似的功能。 ```vue <template> <el-input v-model.trim="form.testA" maxlength="16" @input="handleInput" /> </template> <script> export default { data() { return { form: { testA: '' } }; }, methods: { handleInput(value) { // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } this.form.testA = value; } } }; </script> ``` 此方法适用于Vue.js框架下的场景[^3]，并且能够实现与方法二相同的功能。 #### 方法四：纯 JavaScript 实现输入框校验 对于需要独立于框架的场景，可以使用纯JavaScript实现输入框的校验逻辑。 ```html <input type="text" id="customNum" /> <script> const customNum = document.getElementById('customNum'); customNum.addEventListener('input', function () { let value = this.value; // 清除非数字和小数点的字符 value = value.replace(/[^\d.]/g, ""); // 确保只保留一个小数点 value = value.replace(/\.{2,}/g, "."); value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 控制小数点后最多两位 if (value.split('.').length > 1) { value = value.split('.')[0] + '.' + value.split('.')[1].substring(0, 2); } this.value = value; }); </script> ``` 此方法同样能够满足限制输入框仅接受数字和小数点的需求[^4]。 --- ### 总结 以上四种方法分别适用于不同的场景，开发者可以根据具体需求选择合适的实现方式。无论是通过HTML属性、JavaScript函数还是Vue.js框架，都可以有效地限制输入框的输入内容为数字和小数点，并进一步控制小数点的数量和小数位数。

可以通过自定义指令来限制输入框只能输入数字和小数，以下是一个实现的示例： ```javascript // 注册一个名为 number-only 的自定义指令 Vue.directive('number-only', { // 指令的定义 bind: function (el, binding, vnode) { // 输入框的keypress事件，用于在输入时判断输入是否合法 el.addEventListener('keypress', function (event) { // 防止非数字字符的输入，包括小数点和负号 if (event.keyCode !== 46 && event.keyCode !== 45 && event.keyCode < 48 || event.keyCode > 57) { event.preventDefault(); } // 限制只能输入一个小数点 if (event.keyCode === 46 && el.value.indexOf('.') !== -1) { event.preventDefault(); } }); // 输入框的blur事件，用于在输入完成后格式化输入的数字 el.addEventListener('blur', function (event) { // 将输入的内容转换成浮点数 var value = parseFloat(el.value); // 如果输入不是数字，则清空输入框 if (isNaN(value)) { el.value = ''; } else { // 格式化输入的数字，保留两位小数 el.value = value.toFixed(2); } }); } }); ``` 使用自定义指令时，只需要在需要限制输入的输入框上添加 `v-number-only` 属性即可： ```html <template> <div> <input type="text" v-number-only> </div> </template> ```