javascript - 验证不需要的输入

Question

是否可以验证电话号码，但如果留空则不需要验证？

• 如果输入空 - 表单应提交
• 如果输入电话号码，则要求为 10 位数字。
• 如果与 10 位数字模式不匹配 - 则表单不应提交

请指教，谢谢

Answer 1

如果您使用required 属性，您就游戏结束。所以不要这样做。

its required that it be 10 digits

使用^\d{10}$模式:

input[type=text]:invalid{
  border: 1px solid red;
}

<form>
  <input type="text" pattern="^\d{10}$" />
  <button>SUBMIT</button>
</form>

表单不会提交如果

1. 有一些值并且该值与pattern中的正则表达式不匹配。

表单提交如果

1. 没有任何值(value)
2. 该值并且正好有 10 位数字