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

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

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

姓名： 年龄： 提交

<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(`&#21457;&#29616;&#21482;&#35835;&#23383;&#27573;: ${input.name}`); } }); if (hasReadOnly) { event.preventDefault(); alert('&#34920;&#21333;&#21253;&#21547;&#21482;&#35835;&#23383;&#27573;&#65292;&#35831;&#30830;&#35748;&#26159;&#21542;&#32487;&#32493;&#65311;'); } }); </script>

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

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

javascript-typescript-typescript-scaffold

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

下载

提交

<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(`&#20197;&#19979;&#23383;&#27573;&#20026;&#21482;&#35835;&#29366;&#24577;: ${names}`); // &#26681;&#25454;&#19994;&#21153;&#38656;&#27714;&#20915;&#23450;&#26159;&#21542;&#38459;&#27490;&#25552;&#20132; // event.preventDefault(); } }); </script>

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

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

,

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南