使用HTML创建表单
格式通过，不等于数据可信
把“能否留空”“长什么样”“是否真实”拆成三层判断。
<form oninput="this.querySelector('output').textContent = '';">
<label for="code">预约编号（四位数字，必填）</label>
<input id="code" name="bookingCode" type="text"
inputmode="numeric" pattern="[0-9]{4}" required>
<p>例如：0012</p>
<button type="button" onclick="
this.form.querySelector('output').textContent =
this.form.reportValidity()
? '格式校验通过，但尚未核实预约是否存在。' : '';">
检查填写
</button>
<p><output aria-live="polite"></output></p>
</form>pattern="[0-9]{4}" 要求整个非空值恰好是四位数字；[0-9]表示一位数字，{4}表示重复四次。inputmode只提示输入方式。
留空或填入 123 后点击“检查填写”，浏览器会提示错误；填入 0012 或 9999 则通过格式检查。reportValidity() 检查表单并显示错误提示，不提交数据；必填和格式规则仍由 HTML 属性决定。
这段演示中新出现的语法
| 代码 | 在本例中的意思 |
|---|---|
type="button" | 普通按钮，点击时不会自动提交表单。 |
onclick="…" | 点击按钮时，执行引号里的 JavaScript。 |
this.form | 在按钮的 onclick 中，this 指当前按钮，this.form 指它所属的表单。 |
reportValidity() | 检查表单的 HTML 约束；不符合时显示浏览器提示。全部通过返回 true，否则返回 false；不提交数据。 |
querySelector('output') | 在前面的表单中找到第一个 output 元素。单引号中的 output 是标签选择器。 |
textContent = … | 把该元素显示的文字改成右边的内容；这里的 = 表示赋值，不是比较相等。 |
条件 ? 内容一 : 内容二 | 条件为真时使用内容一，否则使用内容二。本例通过校验时显示说明，否则使用空字符串 ''，清空结果。 |
<output> 与 aria-live="polite" | output 用来展示操作结果；aria-live 提示辅助技术在适当时机播报更新。 |
oninput="…" | 用户编辑输入内容时执行。这里写在 form 上，this 指表单；清除旧结果，避免改错后还显示“通过”。 |
点击按钮 → 检查表单 → 根据 true／false 选择文字 → 显示在 output 中。再次修改输入 → 清除旧结果。圆括号 () 表示调用方法，分号 ; 用于结束语句。
思考
删掉required，保留pattern，空值能通过吗？填入9999并通过格式校验，能证明预约存在吗？
展开参考分析
空值可通过本例pattern约束；pattern本身不要求必填。9999只满足格式，存在性、资格和重复报名仍需服务端按业务规则检查。预约编号是扩展字段，不要求本次报名实际收集。