Vuetify.js中邮箱字段验证问题咨询（附代码片段）

没问题，我来帮你搞定这个邮箱验证需求！在Vuetify的表单体系里，我们只需要给邮箱字段对应的emailRules数组补充两条核心验证规则，就能实现必填校验+合法格式校验的功能。

具体实现步骤： #

1. 首先在data里添加email变量（绑定到邮箱输入框的v-model），然后定义emailRules数组；
2. 给emailRules添加两条规则：
   • 第一条：校验邮箱是否为空，为空时提示用户必填；
   • 第二条：用正则表达式匹配标准邮箱格式，确保输入符合xxx@xxx.xxx这类合法结构。

完整代码示例： #

<template>
  <v-form v-model="valid">
    <v-text-field 
      label="Name" 
      v-model="name" 
      :rules="nameRules" 
      :counter="10" 
      required 
    ></v-text-field>
    <v-text-field 
      label="E-mail" 
      v-model="email" 
      :rules="emailRules" 
      required  <!-- 加上required让输入框显示必填标识 -->
    ></v-text-field>
  </v-form>
</template>

<script>
export default {
  data: () => ({
    valid: false,
    name: '',
    email: '', // 新增邮箱绑定变量
    nameRules: [
      v => !!v || 'Name is required',
      v => v.length <= 10 || 'Name must be at most 10 characters' // 补全你之前截断的规则
    ],
    emailRules: [
      // 邮箱必填规则
      v => !!v || 'E-mail is required',
      // 通用邮箱格式校验正则，覆盖绝大多数常见邮箱类型
      v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
    ]
  })
}
</script>

补充说明： #

• 我给邮箱输入框加上了required属性，这样输入框会显示Vuetify自带的必填红色星号，用户体验更直观；
• 这里用的正则表达式能适配大多数常见邮箱格式，比如test@example.com、user.name@domain.co.uk这类结构；
• 当用户输入不符合规则的内容时，输入框会自动弹出对应的错误提示文本。

内容的提问来源于stack exchange，提问作者geethika