input只能输入正数和两位小数

### 设置 Input 仅接受正数且保留至多两位小数

为了实现这一目标，可以采用多种方式来确保输入框中的数据符合要求。一种常见的方式是在前端通过 JavaScript 或 Vue.js 进行实时验证。

#### 使用 HTML5 的 `pattern` 属性
HTML5 提供了一个简单的内置验证机制——`pattern` 属性，可以直接在 `<input>` 标签上定义一个正则表达式模式：

<input type="text" pattern="^\d+(\.\d{1,2})?$" title="请输入有效的数值">

这种方式简单易用，但是用户体验可能不够友好，因为浏览器默认的错误提示信息较为生硬。

#### 结合 JavaScript 实现更友好的体验
对于更好的用户体验，推荐使用 JavaScript 来处理输入事件并即时给出反馈。下面是一个基于原生 JavaScript 的例子：

document.querySelector('#scoreInput').addEventListener('input', function(event){
    let value = event.target.value;
    // 清除所有非数字字符以及多余的点号
    value = value.replace(/[^0-9.]/g,'');
    // 如果有超过两个的小数位，则截取前两位
    if(value.includes('.')){
        var parts = value.split('.');
        if(parts[1].length > 2){
            parts[1] = parts[1].slice(0,2);
            value = parts.join('.');
        }
    }
    // 更新输入框的内容
    event.target.value = value.startsWith('.') ? '0' + value : value;
});

此代码片段会监听用户的每一次按键操作，并立即清理不符合条件的部分，从而保持输入始终有效。

#### 在 Vue.js 中应用相同的逻辑
如果项目中正在使用 Vue.js 框架，那么可以在组件内部编写类似的函数来进行表单控制。这里展示的是如何利用 Vue 方法配合模板语法完成相同的功能：

<template>
  <div>
    <!-- 绑定 score 变量到 input -->
    <el-input v-model="row.score" @blur="validateScore"></el-input>
  </div>
</template>

<script setup>
import { ref } from "vue";

const row = reactive({ score: "" });

function validateScore() {
  const val = parseFloat(row.score).toFixed(2); // 尝试转换成浮点数并固定为两位小数
  if (!/^(\d+(\.\d{1,2})?)$/.test(val)) {
      alert("请输入至多保留2位小数的正数！");
      return false;
  }
  row.score = val >= 0 ? val : ""; // 确保最终赋值给 model 的是合法的数据
}
</script>

上述代码展示了当失去焦点时调用 `validateScore()` 函数进行合法性检查的过程[^1]。