vue表单校验

// Vue 表单校验示例代码

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label for="name">姓名:</label>
      <input type="text" id="name" v-model.trim="form.name" />
      <span v-if="errors.name">{{ errors.name }}</span>
    </div>

    <div>
      <label for="email">邮箱:</label>
      <input type="email" id="email" v-model.trim="form.email" />
      <span v-if="errors.email">{{ errors.email }}</span>
    </div>

    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      errors: {}
    };
  },
  methods: {
    onSubmit() {
      this.errors = {}; // 清空之前的错误信息

      if (!this.form.name) {
        this.errors.name = '姓名不能为空';
      }

      if (!this.form.email) {
        this.errors.email = '邮箱不能为空';
      } else if (!this.isValidEmail(this.form.email)) {
        this.errors.email = '请输入有效的邮箱地址';
      }

      if (Object.keys(this.errors).length === 0) {
        // 如果没有错误，可以提交表单
        console.log('表单数据:', this.form);
      }
    },
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(email);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 v-model.trim 绑定输入框的值到 form 对象中，并且通过 trim 去除用户输入的前后空格。
   • 每个输入框旁边有一个 <span> 用于显示对应的错误信息，当 errors 对象中有相应的属性时会显示。

2. 脚本部分 (<script>):

   • data() 函数返回一个包含 form 和 errors 的对象。form 用于存储表单数据，errors 用于存储校验错误信息。
   • onSubmit() 方法在表单提交时被调用，首先清空之前的错误信息，然后根据表单内容进行校验，如果有错误则将错误信息存入 errors 对象中。
   • isValidEmail() 方法用于验证邮箱格式是否正确，使用正则表达式进行匹配。

3. 样式部分 (<style scoped>):

   • 这里可以添加一些样式来美化表单，但为了简洁，这里没有具体实现。