在表单提交前检查字段唯一性，最直接的做法是监听表单的 submit 事件，在回调中通过 preventdefault() 拦截提交，并调用异步函数验证数据。如果验证失败，则显示错误信息；如果成功，再手动触发 form.submit() 完成提交。
如何获取表单输入值并阻止默认行为
要拦截提交，需要给表单绑定 onsubmit 或 addEventListener('submit')。在事件处理函数中，使用 event.preventDefault() 阻止浏览器默认的跳转行为，然后通过 FormData 对象或 DOM API 获取当前字段的值。
<form id="myForm">
<input type="text" name="username" id="username" required>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', async function(event) {
event.preventDefault(); // 1. 阻止默认提交
const username = document.getElementById('username').value;
try {
// 2. 执行唯一性检查
await checkUniqueness(username);
// 3. 验证通过，手动提交
this.submit();
} catch (error) {
console.error('Validation failed:', error);
}
});
</script>
如何与后端 API 进行异步通信
唯一性检查通常依赖后端数据库，因此需要使用 fetch 或 XMLHttpRequest 发起请求。建议将输入值作为查询参数或 JSON 体发送给后端接口。后端返回一个布尔值或状态码，前端根据结果决定是继续还是中断流程。
立即学习“Java免费学习笔记（深入）”；
// 假设后端有一个 /api/check-username 接口
async function checkUniqueness(username) {
const response = await fetch(`/api/check-username?name=${encodeURIComponent(username)}`);
const data = await response.json();
if (!data.isUnique) {
throw new Error('Username already exists');
}
}
// 或者使用 POST 方法发送 JSON
async function checkUniquenessPost(username) {
const response = await fetch('/api/check-username', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username })
});
const result = await response.json();
if (!result.success) {
throw new Error(result.message || 'Check failed');
}
}
如何处理网络错误或用户取消操作
当网络请求超时、服务器宕机或用户快速重复点击时，程序可能抛出异常。此时应在 try...catch 块中捕获错误，并向用户展示友好的提示（如“网络繁忙”），而不是让页面无响应或报错。同时，应确保在验证通过后再次提交时，不再重复触发验证逻辑。
