如何在Vue.js中使用watchers实现邮箱校验并控制提交按钮禁用状态

实现思路 #

• 用watch监听绑定邮箱的响应式变量email的变化，自动触发校验逻辑
• 校验通过时清空错误提示，同时将控制按钮禁用状态的变量isDisabled设为false，校验不通过则反之
• 提交按钮直接绑定isDisabled变量，实现禁用/可用状态自动切换

完整代码实现 #

脚本部分（JS） #

data() {
  return {
    email: '',
    maxemail: 50, // 可根据业务需求调整邮箱最大输入长度
    errmsg: {
      email: ''
    },
    isDisabled: true // 初始状态下提交按钮默认禁用
  }
},
watch: {
  // 监听邮箱输入变化自动触发校验
  email(value) {
    this.validateEmail(value);
  }
},
methods: {
  validateEmail(value) {
    // 邮箱格式正则校验
    // eslint-disable-next-line
    if (/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value)) {
      this.errmsg.email = ''
      this.isDisabled = false // 校验通过，解除按钮禁用
    } else {
      this.errmsg.email = '请输入有效的邮箱地址'
      this.isDisabled = true // 校验不通过，保持按钮禁用
    }
  }
}

模板部分（HTML） #

<!-- 邮箱输入框 -->
<input 
  class="input-mobile-email" 
  type="text" 
  placeholder="请输入邮箱" 
  id="email" 
  v-model="email" 
  name="email" 
  :maxlength="maxemail"
/>
<!-- 邮箱格式错误提示（可选） -->
<span v-if="errmsg.email" class="error-tip">{{ errmsg.email }}</span>
<!-- 提交按钮 -->
<button 
  class="submit-button" 
  data-toggle="modal" 
  type="submit" 
  value="提交" 
  data-target="#exampleModal" 
  :class="isDisabled ? '' : 'selected'" 
  :disabled="isDisabled"
>
  提交
</button>

原有代码优化说明 #

• 移除了watch中冗余的this.email = value赋值操作：v-model已经实现了输入值和响应式变量的双向绑定，无需重复赋值
• 修正了methods的语法错误：原代码中methods()写法错误，正确应为methods: {}
• 优化了校验逻辑的参数传递：直接使用监听拿到的最新value做校验，避免取值延迟问题
• 补充了isDisabled变量的状态联动逻辑，实现校验不通过时按钮自动禁用的需求
• 移除了输入框上冗余的@input="validateEmail"绑定：watch已经可以监听email变化自动触发校验，无需重复绑定输入事件

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