JS书写一个表单 包含邮箱，手机号，邮编，密码，用户名，身份证号的正则

这里是一个简单的表单示例，包含了邮箱、手机号、邮编、密码、用户名、身份证号的正则验证：

<form>
  <label>
    邮箱：
    <input type="text" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  </label>
  <br>
  <label>
    手机号：
    <input type="text" name="phone" required pattern="^1[3-9]\d{9}$">
  </label>
  <br>
  <label>
    邮编：
    <input type="text" name="zipcode" required pattern="^\d{6}$">
  </label>
  <br>
  <label>
    密码：
    <input type="password" name="password" required pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$">
  </label>
  <br>
  <label>
    用户名：
    <input type="text" name="username" required pattern="^[a-zA-Z0-9_-]{4,16}$">
  </label>
  <br>
  <label>
    身份证号：
    <input type="text" name="idcard" required pattern="^\d{17}[\d|X]$">
  </label>
  <br>
  <button type="submit">提交</button>
</form>

解释一下各个正则表达式的含义：

- 邮箱：pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
- 以小写字母、数字、下划线、百分号、加号、减号、点号为开头，连续出现至少一个
- 后面跟着一个 @ 符号
- 然后是至少一个小写字母、数字、减号、点号，最后是一个小写字母，长度至少为 2
- 手机号：pattern="^1[3-9]\d{9}$"
- 以 1 开头
- 第二位是 3-9 中的一个数字
- 后面跟着任意 9 个数字
- 邮编：pattern="^\d{6}$"
- 6 个数字
- 密码：pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
- 至少 8 个字符
- 必须包含至少一个字母和一个数字
- 可以包含字母、数字
- 用户名：pattern="^[a-zA-Z0-9_-]{4,16}$"
- 4-16 个字符
- 可以包含大小写字母、数字、下划线、减号
- 身份证号：pattern="^\d{17}[\d|X]$"
- 18 位字符
- 前面 17 位是数字
- 最后一位是数字或者大写字母 X