vue实现注册表单验证包含邮箱，手机号，密码，确认密码

好的，以下是一个包含邮箱、手机号、密码和确认密码的 Vue 注册表单验证示例：

<template>
  <div>
    <form>
      <div>
        <label>邮箱</label>
        <input type="email" v-model="email" />
        <div v-if="errors.email" class="error">{{ errors.email }}</div>
      </div>
      <div>
        <label>手机号</label>
        <input type="tel" v-model="phone" />
        <div v-if="errors.phone" class="error">{{ errors.phone }}</div>
      </div>
      <div>
        <label>密码</label>
        <input type="password" v-model="password" />
        <div v-if="errors.password" class="error">{{ errors.password }}</div>
      </div>
      <div>
        <label>确认密码</label>
        <input type="password" v-model="confirmPassword" />
        <div v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</div>
      </div>
      <button type="submit" @click.prevent="submitForm">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      phone: '',
      password: '',
      confirmPassword: '',
      errors: {},
    };
  },
  methods: {
    validateForm() {
      this.errors = {};
      if (!this.validEmail(this.email)) {
        this.errors.email = '请输入正确的邮箱地址';
      }
      if (!this.validPhone(this.phone)) {
        this.errors.phone = '请输入正确的手机号码';
      }
      if (!this.password) {
        this.errors.password = '密码不能为空';
      } else if (this.password.length < 6) {
        this.errors.password = '密码长度不能少于6位';
      }
      if (this.confirmPassword !== this.password) {
        this.errors.confirmPassword = '两次密码输入不一致';
      }
      return Object.keys(this.errors).length === 0;
    },
    validEmail(email) {
      const re = /\S+@\S+\.\S+/;
      return re.test(email);
    },
    validPhone(phone) {
      const re = /^[1][3,4,5,7,8][0-9]{9}$/;
      return re.test(phone);
    },
    submitForm() {
      if (this.validateForm()) {
        alert('注册成功！');
      }
    },
  },
};
</script>

<style>
.error {
  color: red;
}
</style>

在这个例子中，我们使用了 `type` 属性来指定输入框的类型，包括 `email`、`tel` 和 `password`。我们还定义了一个 `confirmPassword` 变量来存储确认密码的值，并在表单验证中进行了比较。在 `validateForm()` 方法中，我们对每个表单字段进行了验证。如果验证失败，则将错误信息存储到 `errors` 对象中。最后，我们通过检查 `errors` 对象是否为空来确定表单是否验证通过。

在模板中，我们使用了 `v-if` 指令来根据表单验证的结果来显示或隐藏错误信息。我们还定义了一些样式来使错误信息以红色显示。