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

你可以使用正则表达式来校验输入框只能输入数字和小数。以下是一个示例代码：

// 获取输入框元素
const inputElement = document.getElementById("input");

// 给输入框添加输入事件监听器
inputElement.addEventListener("input", function(event) {
  // 获取输入框的值
  const value = event.target.value;
  
  // 使用正则表达式校验
  const regex = /^[0-9]+(\.[0-9]{1,2})?$/;
  if (!regex.test(value)) {
    // 校验不通过，清除输入框的值
    event.target.value = "";
  }
});

在上面的代码中，我们使用 `^[0-9]+(\.[0-9]{1,2})?$` 正则表达式来校验输入框的值。这个正则表达式的含义是：以数字开头，后面可以跟一个小数点和 1 到 2 位数字（可选），结尾。如果输入框的值不符合这个正则表达式，就清空输入框的值。

相关问题

使用vue自定义指令实现一个校验input只能输入数字和小数

可以通过自定义指令来限制输入框只能输入数字和小数，以下是一个实现的示例：

// 注册一个名为 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` 属性即可：

<template>
  <div>
    <input type="text" v-number-only>
  </div>
</template>

VUE3 使用rules校验规则，只能输入数字和小数

在 Vue3 中，使用 `v-model` 指令结合自定义验证规则 (`v-bind:class`) 可以轻松实现数字和小数输入的校验。通常我们会使用第三方库如 `vue-validator` 或者直接利用 Vue 的内置功能，这里我们使用内置的 `vuelidate` 来示例。

首先，你需要安装 `vuelidate`：

npm install vuelidate --save

然后在你的项目中创建一个验证规则文件 `validation.js`:

import { makeValidator } from 'vuelidate'

export const validation = {
  isNumberAndDecimal: makeValidator((val) => Number.isFinite(val) && !isNaN(val)),
}

接下来，在组件里引入这个验证规则，并在 `data` 部分初始化 `vuelidate`:

<template>
  <form @submit.prevent="submitForm">
    <input type="number" v-model.number="inputValue" v-bind:class="{ invalid: errors.inputValue.isNumberAndDecimal }" placeholder="请输入数字和小数">
    <p v-if="errors.inputValue.isNumberAndDecimal">{{ errors.inputValue.isNumberAndDecimal.message }}</p> <!-- 显示错误提示 -->
    <button type="submit" :disabled="!isValid">提交</button>
  </form>
</template>

<script>
import { ValidationProxy } from 'vuelidate'
import { validation } from './validation'

export default {
  data() {
    return {
      inputValue: '',
      errors: new ValidationProxy(validation),
    }
  },
  computed: {
    isValid() {
      return Object.keys(this.errors).every(field => !this.errors[field]);
    },
  },
  methods: {
    submitForm() {
      if (this.isValid) {
        // 执行提交逻辑...
      } else {
        alert('请输入有效的数字和小数')
      }
    },
  },
}
</script>

在这个例子中，当输入不是数字或小数时，`invalid` 类会被添加到输入框上，同时错误提示会被显示出来。如果所有字段都通过验证，表单提交按钮才会启用。