vue2的form表单验证type

在 Vue 2 中，你可以使用 `type` 属性来设置表单元素的类型，并使用 `v-model` 指令将表单元素的值绑定到组件中的数据。下面是一些常见的表单元素类型以及它们的用途：

- `text`: 文本输入框，用于输入单行文本。
- `password`: 密码输入框，用于输入密码，输入的内容会被隐藏。
- `email`: 电子邮件输入框，用于输入邮箱地址。
- `number`: 数字输入框，用于输入数字。
- `tel`: 电话输入框，用于输入电话号码。
- `url`: URL 输入框，用于输入网址。

除了这些基本的表单元素类型之外，你还可以使用自定义的表单验证规则来确保用户输入的数据符合预期。你可以使用 `v-bind` 绑定属性 `pattern` 和 `required` 来设置自定义的表单验证规则。例如：

<template>
  <form>
    <label>
      Email:
      <input type="email" v-model="email" required>
    </label>
    <label>
      Password:
      <input type="password" v-model="password" pattern="[A-Za-z0-9]{6,}" required>
    </label>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  }
}
</script>

在上面的例子中，我们为邮箱地址输入框设置了 `required` 属性，表示这个输入框必须填写。我们还为密码输入框设置了一个自定义的正则表达式 `pattern="[A-Za-z0-9]{6,}"`，表示密码必须由至少 6 个字母和数字组成。这样，用户在提交表单时，如果输入的数据不符合这些规则，就会收到相应的错误提示。