autocomplete 与 novalidate

浏览器为表单提供了许多内置的辅助功能，其中 autocomplete 属性控制表单的自动补全行为，novalidate 属性控制是否启用浏览器内置的表单验证。合理使用这两个属性，可以在用户体验和数据安全之间找到最佳平衡。本节还将介绍其他重要的表单级属性。

前置知识

阅读本节前，建议先了解：enctype 编码类型

基础概念

autocomplete 属性

autocomplete 属性告诉浏览器是否应该对表单控件启用自动补全功能。浏览器会根据用户之前输入过的值（或浏览器保存的表单数据）提供建议，帮助用户快速填写表单。

html

<!-- 启用自动补全（默认行为） -->
<form autocomplete="on">
  <input type="text" name="username">
</form>

<!-- 关闭自动补全 -->
<form autocomplete="off">
  <input type="text" name="one-time-code">
</form>

novalidate 属性

novalidate 是一个布尔属性，设置后浏览器会跳过对表单的内置验证（如 required、pattern、type="email" 等），允许表单直接提交，即使数据不符合验证规则。

html

<!-- 正常情况下，required 字段为空时无法提交 -->
<form action="/submit" method="post">
  <input type="email" name="email" required>
  <button type="submit">提交</button>
</form>

<!-- 添加 novalidate 后，即使 email 为空也可以提交 -->
<form action="/submit" method="post" novalidate>
  <input type="email" name="email" required>
  <button type="submit">提交</button>
</form>

语法

autocomplete 的取值

值	说明
`on`	启用自动补全（默认值）
`off`	关闭自动补全
`token`	细粒度控制，指定具体的补全类型（如 `username`、`email` 等）

表单级属性一览

html

<form
  action="/submit"
  method="post"
  autocomplete="on"
  novalidate
  name="myForm"
  id="myForm"
  target="_self"
  rel="noopener"
>
  ...
</form>

属性	类型	默认值	说明
`autocomplete`	字符串	`on`	自动补全控制
`novalidate`	布尔	`false`	关闭浏览器验证
`target`	字符串	`_self`	响应显示目标
`rel`	字符串	空	提交链接的关系

详细说明

autocomplete 的详细用法

表单级 vs 字段级

autocomplete 可以设置在 <form> 元素上（表单级），也可以设置在单个 <input> 元素上（字段级）。字段级的设置优先于表单级。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>autocomplete 优先级</title>
</head>
<body>
  <!--
    表单级设置为 off（默认关闭）
    但字段级可以单独开启
  -->
  <form autocomplete="off">
    <!-- 继承表单的 off -->
    <input type="text" name="token" placeholder="验证码（不自动补全）">

    <!-- 字段级设置为 on，覆盖表单的 off -->
    <input type="email" name="email" autocomplete="on" placeholder="邮箱（自动补全）">

    <!-- 字段级使用细粒度 token -->
    <input type="text" name="address" autocomplete="street-address" placeholder="街道地址">
  </form>
</body>
</html>

autocomplete 的细粒度 token

HTML5 定义了一系列预定义的 token 值，用于精确告诉浏览器某个字段的含义，以便浏览器提供更精准的自动补全。

常用 autocomplete token：

Token 值	含义	示例
`name`	完整姓名	张三
`given-name`	名	三
`family-name`	姓	张
`username`	用户名	zhangsan
`email`	电子邮箱	a@b.com
`tel`	电话号码	13800138000
`tel-country-code`	国家代码	+86
`tel-national`	国内电话	13800138000
`password`	密码	(不补全)
`new-password`	新密码	(不补全)
`current-password`	当前密码	(不补全)
`street-address`	街道地址	朝阳区xx路xx号
`address-line1`	地址行1	朝阳区xx路xx号
`address-line2`	地址行2	3号楼502室
`city`	城市	北京
`province`	省/州	北京市
`postal-code`	邮政编码	100000
`country`	国家	CN
`country-name`	国家名称	中国
`cc-number`	信用卡号	(不补全)
`cc-csc`	信用卡安全码	(不补全)
`cc-exp`	信用卡过期日期	2025-12
`bday`	生日	1990-01-01
`sex`	性别	男/女
`url`	网址	https://example.com
`photo`	头像	(文件)
`one-time-code`	一次性验证码	(不补全)

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>autocomplete 细粒度控制</title>
  <style>
    .form-group {
      margin-bottom: 12px;
    }

    label {
      display: inline-block;
      width: 120px;
      text-align: right;
      margin-right: 8px;
    }

    input {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h2>收货地址</h2>

  <!-- 使用细粒度 token 让浏览器智能填表 -->
  <form action="/api/address" method="post" autocomplete="on">
    <div class="form-group">
      <label for="name">收货人：</label>
      <input type="text" id="name" name="name" autocomplete="name" required>
    </div>

    <div class="form-group">
      <label for="tel">手机号码：</label>
      <input type="tel" id="tel" name="tel" autocomplete="tel" required>
    </div>

    <div class="form-group">
      <label for="province">省份：</label>
      <input type="text" id="province" name="province" autocomplete="province">
    </div>

    <div class="form-group">
      <label for="city">城市：</label>
      <input type="text" id="city" name="city" autocomplete="city">
    </div>

    <div class="form-group">
      <label for="street">详细地址：</label>
      <input type="text" id="street" name="street" autocomplete="street-address">
    </div>

    <div class="form-group">
      <label for="zipcode">邮编：</label>
      <input type="text" id="zipcode" name="zipcode" autocomplete="postal-code">
    </div>

    <button type="submit">保存地址</button>
  </form>
</body>
</html>

autocomplete="off" 的安全考虑

很多开发者出于安全考虑，在密码字段或敏感字段上设置 autocomplete="off"。然而：

现代浏览器可能忽略 autocomplete="off"

现代浏览器（Chrome、Firefox、Safari 等）可能忽略 autocomplete="off" 设置，仍然为密码字段提供自动补全。这是浏览器为了提升用户体验而做出的决策。如果确实需要防止浏览器保存密码，可以使用非标准的 token 值。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>防止自动补全</title>
</head>
<body>
  <form action="/login" method="post">

    <!--
      方式一：autocomplete="off"（可能被浏览器忽略）
    -->
    <input type="password" name="pwd" autocomplete="off">

    <!--
      方式二：使用 new-password token（推荐）
      告诉浏览器这是新密码，不要自动填充已保存的密码
    -->
    <input type="password" name="new_pwd" autocomplete="new-password">

    <!--
      方式三：使用随机 token 值
      浏览器不认识这个 token，就不会自动补全
    -->
    <input type="text" name="otp" autocomplete="one-time-code">

    <!--
      方式四：使用非标准的 token（hack 方式，不推荐）
    -->
    <!-- <input type="password" name="pwd" autocomplete="do-not-autofill"> -->
  </form>
</body>
</html>

novalidate 的详细用法

什么时候使用 novalidate

场景	是否使用 novalidate	原因
使用自定义验证逻辑	是	用 JavaScript 实现更灵活的验证
渐进式验证体验	是	实时验证比提交时弹提示更友好
A/B 测试验证策略	是	对比浏览器验证和自定义验证的效果
简单表单	否	浏览器内置验证已足够
依赖浏览器验证	否	减少代码量

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>novalidate 自定义验证</title>
  <style>
    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
    }

    input {
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      width: 300px;
    }

    input.error {
      border-color: #e74c3c;
    }

    input.valid {
      border-color: #27ae60;
    }

    .error-msg {
      color: #e74c3c;
      font-size: 12px;
      margin-top: 4px;
      display: none;
    }

    .error-msg.show {
      display: block;
    }
  </style>
</head>
<body>
  <!--
    novalidate 关闭浏览器内置验证
    使用自定义 JavaScript 验证提供更好的体验
  -->
  <form id="customForm" action="/register" method="post" novalidate>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username"
             required minlength="3" maxlength="20">
      <div class="error-msg" id="usernameError"></div>
    </div>

    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
      <div class="error-msg" id="emailError"></div>
    </div>

    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" name="password"
             required minlength="8">
      <div class="error-msg" id="passwordError"></div>
    </div>

    <button type="submit">注册</button>
  </form>

  <script>
    const form = document.getElementById('customForm');

    // 自定义验证函数
    function validateField(input) {
      const errorEl = document.getElementById(input.id + 'Error');
      let message = '';

      // 检查必填
      if (input.required && !input.value.trim()) {
        message = '此字段为必填项';
      }
      // 检查最小长度
      else if (input.minLength && input.value.length < input.minLength) {
        message = `至少需要 ${input.minLength} 个字符`;
      }
      // 检查邮箱格式
      else if (input.type === 'email' && input.value) {
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(input.value)) {
          message = '请输入有效的邮箱地址';
        }
      }

      // 更新 UI
      if (message) {
        input.classList.add('error');
        input.classList.remove('valid');
        errorEl.textContent = message;
        errorEl.classList.add('show');
        return false;
      } else if (input.value) {
        input.classList.remove('error');
        input.classList.add('valid');
        errorEl.classList.remove('show');
        return true;
      }
      return true;
    }

    // 实时验证（输入时）
    form.addEventListener('input', function(e) {
      if (e.target.matches('input')) {
        validateField(e.target);
      }
    });

    // 提交时验证
    form.addEventListener('submit', function(e) {
      e.preventDefault();

      const inputs = form.querySelectorAll('input');
      let allValid = true;

      inputs.forEach(input => {
        if (!validateField(input)) {
          allValid = false;
        }
      });

      if (allValid) {
        // 验证通过，提交表单
        form.submit();
      }
    });
  </script>
</body>
</html>

novalidate 与 checkValidity()

即使设置了 novalidate，仍然可以通过 JavaScript 手动调用验证 API：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>novalidate 与 checkValidity</title>
</head>
<body>
  <form id="myForm" novalidate>
    <input type="email" id="email" name="email" required>
    <input type="text" id="name" name="name" required minlength="2">
    <button type="submit">提交</button>
  </form>

  <script>
    const form = document.getElementById('myForm');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      // novalidate 只阻止浏览器自动弹出的验证提示
      // 但仍然可以用 JS 手动调用验证 API

      // checkValidity()：检查所有字段，返回 true/false
      const isValid = form.checkValidity();
      console.log('表单是否有效：', isValid);

      // reportValidity()：检查并显示浏览器验证提示
      // const isReportValid = form.reportValidity();

      // 逐个字段检查
      const email = document.getElementById('email');
      const name = document.getElementById('name');

      console.log('email 有效：', email.checkValidity());
      console.log('name 有效：', name.checkValidity());

      // 获取具体的验证错误信息
      if (!email.validity.valid) {
        if (email.validity.valueMissing) {
          console.log('邮箱为空');
        } else if (email.validity.typeMismatch) {
          console.log('邮箱格式不正确');
        }
      }
    });
  </script>
</body>
</html>

其他表单级属性

target 属性

target 属性控制表单提交后，服务器响应在哪个窗口或框架中显示。

值	说明
`_self`	当前窗口（默认值）
`_blank`	新窗口或新标签页
`_parent`	父框架
`_top`	最顶层窗口

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>target 属性</title>
</head>
<body>
  <!-- 在当前窗口打开（默认） -->
  <form action="/search" method="get" target="_self">
    <input type="text" name="q">
    <button type="submit">当前窗口搜索</button>
  </form>

  <!-- 在新标签页打开 -->
  <form action="/search" method="get" target="_blank">
    <input type="text" name="q">
    <button type="submit">新标签页搜索</button>
  </form>

  <!-- 在指定名称的窗口打开 -->
  <form action="/result" method="post" target="resultWindow">
    <input type="text" name="data">
    <button type="submit">在指定窗口显示结果</button>
  </form>
</body>
</html>

安全提示

使用 target="_blank" 时，建议配合 rel="noopener" 防止新页面通过 window.opener 访问原页面。

html

<form action="/external" method="post" target="_blank" rel="noopener">
  ...
</form>

rel 属性

rel 属性指定表单提交链接与目标 URL 之间的关系。

值	说明
`noopener`	新窗口无法访问 `window.opener`（安全）
`noreferrer`	不发送 Referer 头（隐私）

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>rel 属性</title>
</head>
<body>
  <!-- 同时使用 noopener 和 noreferrer -->
  <form action="https://external-site.com/api" method="post"
        target="_blank" rel="noopener noreferrer">
    <input type="text" name="query">
    <button type="submit">在外部站点搜索</button>
  </form>
</body>
</html>

实战示例

完整的注册表单

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>综合表单属性示例</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 500px;
      margin: 40px auto;
      padding: 20px;
      background-color: #f9f9f9;
    }

    .form-card {
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    h2 {
      text-align: center;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: #333;
    }

    input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      box-sizing: border-box;
      font-size: 14px;
    }

    input:focus {
      outline: none;
      border-color: #4a90d9;
      box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.1);
    }

    .btn-submit {
      width: 100%;
      padding: 12px;
      background-color: #4a90d9;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 8px;
    }

    .btn-submit:hover {
      background-color: #3a7bc8;
    }

    .hint {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <div class="form-card">
    <h2>创建账号</h2>

    <!--
      autocomplete="on"：启用自动补全
      novalidate：关闭浏览器验证，使用自定义验证
    -->
    <form id="registerForm"
          action="/api/register"
          method="post"
          autocomplete="on"
          novalidate>

      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text"
               id="name"
               name="name"
               autocomplete="name"
               placeholder="请输入真实姓名"
               required>
      </div>

      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email"
               id="email"
               name="email"
               autocomplete="email"
               placeholder="example@mail.com"
               required>
      </div>

      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="tel"
               id="phone"
               name="phone"
               autocomplete="tel"
               placeholder="13800138000"
               required
               pattern="^1[3-9]\d{9}$">
        <p class="hint">请输入11位手机号码</p>
      </div>

      <div class="form-group">
        <label for="password">设置密码</label>
        <input type="password"
               id="password"
               name="password"
               autocomplete="new-password"
               placeholder="至少8位，包含字母和数字"
               required
               minlength="8">
      </div>

      <div class="form-group">
        <label for="confirmPwd">确认密码</label>
        <input type="password"
               id="confirmPwd"
               name="confirm_password"
               autocomplete="new-password"
               placeholder="再次输入密码"
               required>
      </div>

      <button type="submit" class="btn-submit">注册</button>
    </form>
  </div>

  <script>
    const form = document.getElementById('registerForm');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      // 手动触发浏览器验证（用于显示提示）
      if (!form.checkValidity()) {
        form.reportValidity();
        return;
      }

      // 额外的自定义验证：两次密码一致
      const pwd = document.getElementById('password').value;
      const confirmPwd = document.getElementById('confirmPwd').value;

      if (pwd !== confirmPwd) {
        document.getElementById('confirmPwd').setCustomValidity('两次输入的密码不一致');
        form.reportValidity();
        // 清除自定义验证消息
        document.getElementById('confirmPwd').setCustomValidity('');
        return;
      }

      // 验证通过，提交表单
      const formData = new FormData(form);
      fetch(form.action, {
        method: 'POST',
        body: formData
      }).then(response => {
        if (response.ok) {
          alert('注册成功！');
        }
      });
    });
  </script>
</body>
</html>

注意事项

autocomplete 与密码管理器的冲突：autocomplete="off" 不能可靠地阻止密码管理器填充密码字段。浏览器认为自动填充密码是安全功能，会优先于 off 设置。
novalidate 不等于不验证：novalidate 只是关闭浏览器的自动弹出验证，HTML 验证属性（required、pattern 等）仍然存在于 DOM 中，可以通过 JavaScript 手动调用 checkValidity() 来利用它们。
target="_blank" 的安全风险：使用 target="_blank" 打开新窗口时，新页面可以通过 window.opener 控制原页面。始终配合 rel="noopener" 使用。
autocomplete token 的浏览器支持：细粒度的 autocomplete token（如 street-address）在主流浏览器中支持良好，但不同浏览器的自动补全行为可能略有差异。
敏感字段的 autocomplete 策略：对于银行账号、信用卡号、一次性验证码等敏感字段，应使用对应的 token（如 cc-number、one-time-code）或设置为 off。

最佳实践

为表单启用 autocomplete：大多数表单都应该启用 autocomplete="on"，并使用细粒度 token 帮助浏览器理解字段含义，提升用户体验。
密码字段使用 new-password 或 current-password：不要简单地在密码字段上设置 autocomplete="off"，而应使用语义化的 token。
自定义验证时使用 novalidate + checkValidity()：关闭浏览器自动弹出验证，但仍然利用 HTML 验证属性和验证 API，减少重复代码。
始终为外部链接的表单设置 rel="noopener"：防止 window.opener 安全漏洞。
不要在所有表单上设置 autocomplete="off"：全局关闭自动补全会降低用户体验，只在确实需要的字段上关闭。

继续学习：input 标签总览

autocomplete 与 novalidate ​

基础概念 ​

autocomplete 属性 ​

novalidate 属性 ​

语法 ​

autocomplete 的取值 ​

表单级属性一览 ​

详细说明 ​

autocomplete 的详细用法 ​

表单级 vs 字段级 ​

autocomplete 的细粒度 token ​

autocomplete="off" 的安全考虑 ​

novalidate 的详细用法 ​

什么时候使用 novalidate ​

novalidate 与 checkValidity() ​

其他表单级属性 ​

target 属性 ​

rel 属性 ​

实战示例 ​

完整的注册表单 ​

注意事项 ​

最佳实践 ​

参考链接 ​

autocomplete 与 novalidate

基础概念

autocomplete 属性

novalidate 属性

语法

autocomplete 的取值

表单级属性一览

详细说明

autocomplete 的详细用法

表单级 vs 字段级

autocomplete 的细粒度 token

autocomplete="off" 的安全考虑

novalidate 的详细用法

什么时候使用 novalidate

novalidate 与 checkValidity()

其他表单级属性

target 属性

rel 属性

实战示例

完整的注册表单

注意事项

最佳实践

参考链接