VUE3中对小数校验自定义规则

在Vue 3中使用Element Plus和async-validator实现一个满足以下条件的输入框：

只能输入数字。
小数点后最多到5位小数。
去除小数点后多余的0。
使用el-input-number标签。
绑定的参数为number类型。

实现步骤

1.安装依赖：
确保你已经安装了element-plus和async-validator。

npm install element-plus async-validator

2.创建Vue组件：
创建一个Vue组件，使用el-input-number并绑定一个number类型的变量。

3.使用async-validator进行验证：
使用async-validator来验证输入是否符合要求。

4.格式化输入：
在输入框失去焦点时，格式化输入值，去除小数点后多余的0。

代码实现

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="数字输入框" prop="number">
      <el-input-number
        v-model="form.number"
        :precision="5"
        :controls-position="'right'"
        @blur="formatNumber"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInputNumber } from 'element-plus';
import AsyncValidator from 'async-validator';

export default {
  components: {
    ElForm,
    ElFormItem,
    ElInputNumber,
  },
  setup() {
    const form = ref({
      number: null,
    });

    const formRef = ref(null);

    const rules = {
      number: [
        {
          validator: (rule, value, callback) => {
            if (value === null || value === '') {
              callback(new Error('请输入数字'));
            } else if (!/^\d+(\.\d{1,5})?$/.test(value)) {
              callback(new Error('只能输入数字，且小数点后最多5位'));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    };

    const formatNumber = () => {
      if (form.value.number !== null && form.value.number !== '') {
        // 将数字转换为字符串
        let numStr = form.value.number.toString();
        // 如果包含小数点，去除末尾多余的0
        if (numStr.includes('.')) {
          numStr = numStr.replace(/\.?0+$/, ''); // 去除小数点后多余的0
        }
        // 更新绑定的值
        form.value.number = parseFloat(numStr);
      }
    };

    return {
      form,
      formRef,
      rules,
      formatNumber,
    };
  },
};
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>

代码说明

el-input-number：
- 使用el-input-number组件，并设置precision为5，限制小数点后最多5位。
- 使用v-model绑定form.number，确保绑定的值是number类型。
async-validator：
- 在rules中定义验证规则，使用正则表达式验证输入是否为数字，并且小数点后最多5位。
- 在blur事件中触发验证。
formatNumber 方法：
- 在输入框失去焦点时（@blur事件），调用formatNumber方法。
- 将绑定的form.number转换为字符串。
- 如果字符串包含小数点（.），使用正则表达式/\.?0+$/去除小数点后多余的0。
- 最后将处理后的字符串转换回number类型，并更新绑定的form.number。
正则表达式 /\.?0+$/：
- \.?：匹配小数点（.），?表示小数点可选。
- 0+：匹配一个或多个0。
- $：匹配字符串的末尾。
- 这个正则表达式的作用是去除小数点后多余的0，同时保留小数点前的0。
示例：
- 输入 2800.5900，处理后变为 2800.59。
- 输入 2800.0000，处理后变为 2800。
- 输入 2800，保持不变。

注意事项

el-input-number的precision属性会自动限制小数点后的位数，但不会去除多余的0，因此需要在blur事件中手动处理。
async-validator的验证规则可以根据需要进行调整，确保输入符合要求。
如果输入的值是整数（如 2800），formatNumber方法会保留它，不会添加小数点。

测试用例

输入 2800.5900，失去焦点后显示 2800.59。
输入 2800.0000，失去焦点后显示 2800。
输入 2800，失去焦点后显示 2800。
输入 0.12345000，失去焦点后显示 0.12345。