vue H5 原生input如何做必填校验和数字类型校验

在Vue.js中，对H5原生`<input>`元素进行必填校验和数字类型的校验通常通过HTML5的内置属性和事件结合Vue的指令来完成。以下是简单的步骤：

1. **必填校验**：
- 使用`required`属性：直接在`<input>`标签上添加`required`属性，如`<input type="text" v-model="username" required>`.当这个字段失去焦点且为空时，浏览器会显示提示信息说该字段为必填。

2. **数字类型校验**：
- 利用`type="number"`限制输入：将`<input>`的`type`设为`number`，可以防止用户输入非数字字符。但是，如果需要更复杂的验证，比如只允许整数，可以在Vue的watcher或自定义验证函数中检查v-model的数据。

<input type="number" v-model.number="numberInput" @blur="validateNumber">

这里`v-model.number`表示数据会被自动转换成数字类型，`@blur`事件触发时调用`validateNumber`函数。

**Vue验证示例（自定义验证函数）**：

data() {
  return {
    username: '',
    numberInput: ''
  }
},
methods: {
  validateNumber() {
    if (!Number.isInteger(this.numberInput)) {
      this.$message.error('请输入整数');
    }
  }
}