表单校验时如何同时验证手机号和验证码？

子慧（打工版）提问于 2026-03-17 23:47:22 阅读 2

交互

我做登录页，需要用户填手机号和短信验证码。现在用的是 HTML5 的 <input type="tel"> 加 pattern 校验手机号，但验证码是 6 位数字，不知道怎么把两个字段联动起来一起校验。

比如用户改了手机号，之前的验证码就失效了，这时候应该清空验证码输入框并提示。但我试了在手机号的 onchange 里清空验证码，结果表单整体校验还是通过了，因为验证码字段本身格式是对的。这逻辑该怎么处理才对？

const phoneInput = document.getElementById('phone');
const codeInput = document.getElementById('code');

phoneInput.addEventListener('change', () => {
  codeInput.value = '';
  // 但此时如果直接点提交，codeInput 因为空值会触发 required 提示，
  // 可如果用户手动输了个 6 位数，哪怕手机号变了，校验也会过……
});

我来解答赞 1 收藏

反馈

暂无解答