在表单提交前检查字段只读状态，最直接的办法是在 submit 事件中拦截，通过 event.preventdefault() 阻止默认行为。具体做法是遍历所有 <input> 元素，检查其 readonly 属性是否为 true，如果存在只读字段则提示用户并终止提交。

如何判断 input 元素的只读状态

判断 <input> 元素的只读状态，应使用 DOM 属性 readOnly。该属性返回一个布尔值，当元素被设置为只读时值为 true，否则为 false。注意区分 disabled 属性，后者表示元素完全不可用且不会随表单提交数据，而 readOnly 表示元素可聚焦、可见但内容不可编辑，且数据会随表单提交。

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" value="张三" readonly>
  
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age" value="25">
  
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  const inputs = this.querySelectorAll('input');
  let hasReadOnly = false;
  
  inputs.forEach(input => {
    if (input.readOnly) {
      hasReadOnly = true;
      console.log(`发现只读字段: ${input.name}`);
    }
  });
  
  if (hasReadOnly) {
    event.preventDefault();
    alert('表单包含只读字段，请确认是否继续？');
  }
});
</script>

如何处理多个字段的只读校验逻辑

处理多个字段的只读校验逻辑时，需要遍历表单内所有相关输入控件，收集所有只读字段的名称或标识。这样可以提供详细的反馈信息，而不是仅仅知道“有”只读字段。在实际开发中，通常需要根据业务需求决定是禁止提交还是允许提交但标记警告。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

立即学习“Java免费学习笔记（深入）”；

<form id="multiFieldForm">
  <input type="text" name="field1" value="A" readonly>
  <input type="text" name="field2" value="B">
  <input type="text" name="field3" value="C" readonly>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('multiFieldForm').addEventListener('submit', function(event) {
  const readOnlyFields = Array.from(this.querySelectorAll('input[readonly]'));
  
  if (readOnlyFields.length > 0) {
    const names = readOnlyFields.map(f => f.name).join(', ');
    console.log(`以下字段为只读状态: ${names}`);
    // 根据业务需求决定是否阻止提交
    // event.preventDefault();
  }
});
</script>

只读字段在 FormData 中的表现是什么

只读字段（readOnly）在 FormData 中依然会被包含并提交到服务器。这与 disabled 字段不同，disabled 字段的数据不会被序列化进 FormData。因此，如果在后端期望接收只读字段的数据，前端无需额外处理；如果后端不需要，则应在后端过滤或在提交前移除。

,