在表单提交前检查字段打印状态，核心做法是在 submit 事件中拦截默认行为，通过遍历表单元素或查询特定选择器来获取当前值，并在控制台打印这些状态信息。具体实现时，需为表单绑定 onsubmit 事件处理函数，在其中调用 event.preventdefault() 阻止页面跳转，随后使用 document.getelementbyid 或 queryselector 获取输入框的 value 属性，最后用 console.log 输出结果。若未找到对应字段或值为空，应明确记录该状态以避免静默失败。
如何捕获表单提交事件并阻止默认跳转
要拦截表单提交，必须监听 submit 事件而非 click 按钮点击，因为用户可能通过回车键触发提交。在事件处理函数中，第一步是调用 preventDefault() 方法，这将停止浏览器默认的页面刷新和跳转行为，使控制权留在 JavaScript 中。此时，你可以安全地访问表单内的所有数据而不会丢失上下文。确保事件绑定在 <form></form> 标签上，这样能覆盖所有提交方式，包括脚本触发的 form.submit()（需注意某些情况下 submit 事件可能不冒泡，建议直接绑定到 form 元素）。
<form id="myForm" onsubmit="handleSubmit(event)">
<input type="text" name="username" id="username" placeholder="用户名">
<button type="submit">提交</button>
</form>
<script>
function handleSubmit(event) {
event.preventDefault();
const username = document.getElementById('username').value;
console.log('Username value:', username);
}
</script>
如何获取并验证特定字段的当前值
获取字段状态的关键在于准确定位 DOM 元素并读取其 value 属性。对于标准文本输入，直接使用 document.querySelector('input[name="field_name"]') 或 getElementById 即可。如果字段是动态生成的，建议使用 closest() 或基于父容器的查询来确保稳定性。获取值后，应立即进行非空或格式校验，并将结果打印到控制台。注意，value 始终返回字符串类型，即使输入的是数字，因此在进行数值比较时需显式转换。若字段被禁用（disabled），其值通常不会被包含在表单提交数据中，但在 DOM 中仍可读取，需根据业务逻辑决定是否忽略此类字段。
立即学习“Java免费学习笔记（深入）”；
<form id="dataForm">
<input type="number" id="age" name="age">
<select id="role" name="role">
<option value="admin">Admin</option>
<option value="user">User</option>
</select>
<button type="submit">Save</button>
</form>
<script>
document.getElementById('dataForm').addEventListener('submit', function(e) {
e.preventDefault();
const ageVal = document.getElementById('age').value;
const roleVal = document.getElementById('role').value;
console.log('Age (string):', ageVal, typeof ageVal);
console.log('Role:', roleVal);
if (!ageVal) {
console.warn('Age field is empty');
}
});
</script>
当字段值为空或未定义时如何处理打印状态
当字段值为空字符串、null 或 undefined 时，打印状态应明确标识出缺失情况，而不是仅输出空白。在代码中，可以通过三元运算符或条件判断来区分有效值和无效值。例如，若 value 为空，可打印 "Field is empty" 而非空字符串。此外，对于未渲染的 DOM 元素，querySelector 将返回 null，此时直接访问 .value 会抛出错误，因此必须先检查元素是否存在。建议在打印前增加存在性校验，确保程序健壮性。这种处理方式有助于在调试阶段快速定位哪些字段未被正确填充或初始化。
