Question

我想为送货服务网站创建一个邮政编码验证器。（几乎就像一个促销代码字段，只有正确的代码才能使用。）

这是客户端上的HTML表单，用户可以在其中键入其邮政编码，并检查其所在区域是否可以交付。可以选择提供邮政编码的5个邮政编码。

到目前为止，这是我尝试使用的一个邮政编码，但它没有显示任何错误消息。

<form>
<div class="form-group">
<input class="form-control" required
              data-msg="Sorry we do not deliver to you yet."
              data-label="Zipcode"
              type="number" name="zipcode" 
              placeholder="Enter your zipcode or address" 
              pattern="11111" required
               />
</input>
</div>
<div class="btn-wrapper mt-6">
<input type="submit" value="Submit">
</div>
</form>

-如果用户输入并提交了正确的邮政编码，则应将其带到订购页面。

-如果邮政编码不是所选的邮政编码之一，则错误消息应显示在“对不起，我们未交付给您。请在此处订阅，以便在可以交付给您时通知您”。（此错误消息需要使用javascript）

-选定的邮政编码（任何号码现在都可以使用）。例如：11111、22222、33333、44444、55555

Answer 1

当前不支持number类型的输入模式，但可用于text，search，url，tel，email和password

<p>validate any 5 digit</p>
<form>
  <input pattern="[0-9]{5}" required />
  <input type="submit" value="Submit">
</form>

<p>validate only 11111, 22222, 33333, 44444, 55555</p>
<form>
  <!-- or: 1{5}|2{5}|3{5}|4{5}|5{5} -->
  <input pattern="11111|22222|33333|44444|55555" required />
  <input type="submit" value="Submit">
</form>

如何创建仅接受所选邮政编码的HTML表单

1 个答案: