JavaScript 与 HTML5 原生 API 实现自定义表单验证

周叙

发布时间：2026-10-13| 4人浏览过

原创

表单验证不仅用于检测无效数据，更是提升用户体验的关键环节。通过结合 HTML5 原生特性（如 `required` 和 `type` 属性）与 JavaScript 的事件监听，开发者可以实现精准且交互友好的错误提示机制。

结果与目标

本方案旨在实现以下功能：

必填项拦截：利用 required 属性与 JS 逻辑双重保障。
格式校验：针对邮箱等特定字段自动触发浏览器原生校验。
自定义提示：通过 CSS :invalid 伪类和 DOM 操作，替换默认浏览器警告框，输出美观的错误提示信息。

准备条件

确保环境支持 HTML5 标准特性。代码将分为三个部分：HTML 结构、CSS 样式控制以及 JavaScript 核心逻辑。

真实操作顺序

第1步：构建 HTML 表单结构

目的：创建包含名称、邮箱及省份选择的表单框架，并为关键输入框绑定必要的验证属性。

动作：使用 form 标签包裹表单元素，禁用默认的无验证提交行为（novalidate），并添加 ID 供后续 JS 引用。在需要强制输入的输入框中添加 required 属性。

<form action="#" id="formValid" class="myform" novalidate="novalidate" onsubmit="return checkForm()">
  <fieldset>
    <!-- 名称输入 -->
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" name="name" required/>
    <span class="form-error">不能为空</span>

    <!-- 邮箱输入 -->
    <label for="email">邮箱</label>
    <input type="email" class="form-control" id="email" name="email" required/>
    <span class="form-error">邮箱格式不正确</span>

    <!-- 下拉选择 -->
    <select name="province" class="form-control">
      <option value="">请选择</option>
      <option value="s">四川</option>
      <option value="c">重庆</option>
    </select>

    <input type="submit" class="btn" value="提交"/>
  </fieldset>
</form>

注意：.form-error 的 span 标签必须紧邻对应的 input 或 select，以便配合 CSS 使用相邻兄弟选择器（+）进行显隐控制。

第2步：编写 CSS 样式控制

目的：定义表单外观，并利用 CSS 高级选择器根据输入状态动态显示错误提示。

动作：初始化表单基础样式，重点处理 .form-error 的隐藏与定位。使用 :focus:invalid 组合伪类，当用户聚焦于非法输入时，自动显示紧随其后的错误文本。

/* 基础重置 */
fieldset { border: 0; }
.myform .form-control {
  display: block;
  padding: 5px;
  width: 100%;
}

/* 核心：错误提示显隐逻辑 */
/* 初始隐藏所有错误提示 */
.myform .form-error {
  display: none;
  position: absolute;
  margin-top: .7em;
  padding: 1px 2px;
  color: #fff;
  font-size: .875rem;
  background: #f40;
}

/* 当输入框聚焦且内容无效时，显示后面的 .form-error */
.myform input:focus:invalid + .form-error {
  display: inline;
}

/* 可选：为错误提示添加小三角箭头 */
.myform .form-error:after {
  content: "";
  position: absolute;
  top: -.5em;
  left: .5em;
  z-index: 100;
  width: 0;
  height: 0;
  border-bottom: .5em solid #f40;
  border-right: .5em solid transparent;
  border-left: .5em solid transparent;
}

第3步：实现 JavaScript 验证逻辑

目的：拦截表单提交事件，对特定控件（如 Select）执行定制化校验，并对未通过原生验证的 Input 聚焦报错。

动作： 1. 绑定 onsubmit 事件，调用 checkForm() 函数。 2. 遍历表单元素，针对 Select 类型检查是否有选中值。 3. 针对普通 Input 类型，调用内置 API checkValidity() 判断是否满足 HTML5 属性要求。

function checkForm(){
  var myform = document.getElementById("formValid");
  return check(myform.elements);
}

function check(eles){
  var ele;
  // 遍历所有表单项
  for(var i = 0; i < eles.length; i++){
    ele = eles[i];
    
    // 针对下拉菜单的特殊处理
    if(ele.nodeName == "SELECT"){
      // selectedIndex 为 0 通常代表选择了第一个空选项（如果第一项 value 为空）
      if(!ele.selectedIndex || ele.options[ele.selectedIndex].value === ""){
        alert("请选择省份");
        return false;
      }
    }else if(ele.name){
      // 针对 Input 等元素：检查是否通过 HTML5 内置规则校验
      if(!ele.checkValidity()){
        ele.focus(); // 聚焦到出错的输入框，触发 CSS :invalid 样式
        return false;
      }
    }
  }
  return true;
}