Vue.js移动端邮箱校验样式异常：错误变红但正确不显示黑色

问题根源排查 #

从你提供的代码来看，主要有两个潜在问题导致移动端异常：

• 部分移动端浏览器对空字符串""的布尔判断和桌面端不一致，你用warning字符串的空/非空来控制样式，可能在移动端导致!warning不生效
• HTML里绑定的事件是checkReady，但校验函数叫checkmyEmail，如果这俩不是同一个函数，等于输入时根本没触发正确的校验逻辑

分步修复 #

1. 先修正事件绑定（关键第一步） #

把HTML里的@input="checkReady"改成@input="checkmyEmail"，确保输入时能触发你写的校验函数：

<input id="myEmail" :class="{'red': warning, 'black': !warning}" 
       @input="checkmyEmail" placeholder="email.privat@gmail.com" 
       v-model="ownEmail"/>

2. 用布尔值替代字符串判断样式 #

直接用你已经维护的oEmailReady布尔值来控制样式，彻底避免空字符串的判断歧义：

<input id="myEmail" :class="{'red': !oEmailReady, 'black': oEmailReady}" 
       @input="checkmyEmail" placeholder="email.privat@gmail.com" 
       v-model="ownEmail"/>

这个改动最核心，因为布尔值的判断在所有浏览器里都是一致的，不会出现移动端特有的偏差。

3. 优化邮箱正则（避免误判合法邮箱） #

原正则会漏掉很多合法邮箱格式（比如带下划线的用户名abc_123@xxx.com、多级域名abc@xxx.co.uk），换成更通用的正则，减少不必要的错误判定：

function checkmyEmail() {
  // 兼容绝大多数合法邮箱格式的正则
  const validEmailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (validEmailRegex.test(ownEmail.value)) {
    warning.value = "";
    oEmailReady.value = true;
  } else {
    warning.value = "请输入正确的邮箱地址！";
    oEmailReady.value = false;
  }
}

这里用test()替代match()，性能和可读性更好。

4. 增加失焦校验兜底 #

部分移动端输入法可能在输入过程中input事件触发不及时，加上@blur事件确保失焦时也能校验：

<input id="myEmail" :class="{'red': !oEmailReady, 'black': oEmailReady}" 
       @input="checkmyEmail" @blur="checkmyEmail"
       placeholder="email.privat@gmail.com" 
       v-model="ownEmail"/>

测试验证 #

修改后在移动端测试这几个场景：

• 输入错误邮箱，确认输入框变红
• 修正为合法邮箱，确认输入框切回黑色
• 清空输入框，确认回到红色错误状态

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