输入只接受数字 - Html

开发一个网页表单时，经常需要对用户输入进行校验，以确保输入的数据格式满足要求，并且避免潜在的安全问题。其中，一个常见的校验需求就是只接受数字输入。

在 HTML 中，我们可以使用 type="number" 属性来告诉浏览器，该输入框只接受数字输入。同时，我们还可以使用其他属性来进一步控制输入框的行为。

HTML 代码示例

<input type="number" name="age" min="18" max="60" step="1" required>

上面的代码片段定义了一个名为 "age" 的输入框，该输入框只接受数字，且数字范围在 18 到 60 之间，步长为 1。其中，required 属性表示该输入框为必填项，用户必须填写才能提交表单。

除了 type="number" 属性外，还有其他可选的类型属性，如 type="tel" 表示电话号码，type="email" 表示电子邮件地址等。不同类型的输入框会强制校验输入数据的格式，避免用户输入错误格式的数据。

JavaScript 代码示例

如果你需要使用 JavaScript 来进一步校验用户输入，可以结合 HTML 中的 pattern 属性和 oninput 事件来实现。例如，下面的代码片段定义了一个只接受 11 位数字的手机号码输入框：

<input type="tel" name="phone" pattern="\d{11}" oninput="checkPhone()" required>

function checkPhone() {
  var phone = document.getElementsByName("phone")[0];
  var valid = phone.checkValidity();
  if (valid) {
    // 合法输入
  } else {
    // 非法输入
  }
}

在上面的代码中，pattern="\d{11}" 表示该输入框只接受 11 位数字，oninput="checkPhone()" 表示每当用户输入时，都会触发 checkPhone() 函数进行校验。

其中，checkValidity() 函数会返回一个布尔值，表示输入框是否合法。如果输入框非法，我们可以通过 JavaScript 修改提示信息等，以引导用户正确输入。