如何在HTML中实现表单字段类型校验-html教程-PHP中文网

会，但仅做基础格式校验：检查是否含@及合法域名结构（如a@b.c），不验证域名存在性或邮箱真实性；需配合required触发，且必须后端二次校验。

如何在html中实现表单字段类型校验

input[type="email"] 会自动校验邮箱格式吗

会，但只做基础正则匹配，不验证域名是否存在或邮箱是否真实可用。浏览器内置校验仅检查是否含 @ 符号、是否有合法域名结构（如 a@b.c），但 a@b..c 或 @example.com 会被拒绝，而 test@localhost 却可能通过。

实际使用时要注意：

必须配合 required 属性才能触发校验（否则空值不报错）
提交时校验失败会阻止表单提交，并显示浏览器默认提示（无法统一 UI）
Safari 对 type="email" 的正则比 Chrome 更宽松，user@domain（无后缀）在 Safari 可能通过
不能替代后端校验——恶意用户可禁用 JS 或绕过 HTML 属性直接发请求

如何让 number 类型输入框禁止输入字母和符号

input[type="number"] 本身会拦截非数字字符（除 -、+、.、e 等科学计数法允许的符号），但它不阻止粘贴非法内容，也不限制小数点重复（如 1.2.3）或负号位置错误（如 --1）。

更可靠的控制方式是监听 input 事件并清洗值：

const numInput = document.querySelector('input[type="number"]');
numInput.addEventListener('input', (e) => {
  const value = e.target.value;
  // 只保留数字、一个点、开头可选的负号
  const cleaned = value.replace(/[^0-9.-]/g, '').replace(/(..*)./g, '$1').replace(/^(-)?[^d.-]*/, '$1');
  if (cleaned !== value) e.target.value = cleaned;
});

注意：step 属性会影响校验逻辑——若设 step="1" 却输入 1.5，提交时会报错；未设置 step 则默认允许任意小数。

自定义校验失败时的提示文案

浏览器原生提示（如 “请填写电子邮件地址”）无法直接修改，但可通过 setCustomValidity() 覆盖：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

关键点：

调用 setCustomValidity('') 表示校验通过；传入非空字符串即为失败状态
必须在每次输入后重新调用，否则旧错误信息会持续阻塞提交
推荐在 input 和 blur 事件中都处理，兼顾实时反馈与失焦确认
不要只依赖 invalid 事件——它不包含具体原因，且不冒泡

示例：手机号长度校验

const phone = document.querySelector('#phone');
phone.addEventListener('input', () => {
  if (phone.value.length !== 11) {
    phone.setCustomValidity('手机号必须为11位');
  } else if (!/^1[3-9]d{9}$/.test(phone.value)) {
    phone.setCustomValidity('手机号格式不正确');
  } else {
    phone.setCustomValidity(''); // 清除错误
  }
});