表单怎样补齐校验、错误、禁用和提交中状态

<!doctype html>
<html lang="zh-CN"><meta charset="utf-8"><title>注册状态练习</title>
<form id="signup" novalidate>
<label for="email">邮箱</label><input id="email" type="email" aria-describedby="email-error">
<p id="email-error"></p>
<label for="password">密码（教学值即可）</label><input id="password" type="password" aria-describedby="password-error">
<p id="password-error"></p>
<label><input id="terms" type="checkbox" aria-describedby="terms-error">同意协议</label><p id="terms-error"></p>
<label for="scenario">模拟响应</label><select id="scenario"><option>201</option><option>409</option><option>422</option><option>429</option><option>500</option></select>
<button id="submit">注册</button><p id="message" role="status" aria-live="polite"></p>
</form>
<script>
const el=id=>document.getElementById(id);
let busy=false;
el('signup').addEventListener('submit',async event=>{
 event.preventDefault(); if(busy)return;
 for(const id of ['email','password','terms']){el(id).removeAttribute('aria-invalid');el(id+'-error').textContent='';}
 el('message').textContent='';
 const errors=[];
 if(!el('email').value || !el('email').validity.valid)errors.push(['email','请输入完整邮箱']);
 if(el('password').value.length<8)errors.push(['password','请输入至少8位教学密码']);
 if(!el('terms').checked)errors.push(['terms','请确认协议']);
 function showError(id,text){el(id).setAttribute('aria-invalid','true');el(id+'-error').textContent=text;}
 if(errors.length){for(const [id,text] of errors)showError(id,text);el(errors[0][0]).focus();return;}
 busy=true;el('submit').disabled=true;el('submit').textContent='提交中';
 try{
  await new Promise(resolve=>setTimeout(resolve,800));
  const status=Number(el('scenario').value);
  if(status===201){el('message').textContent='教学成功：下一步验证邮箱。本例没有真实注册或发邮件。';}
  else if(status===409){showError('email','本教学响应表示邮箱已存在，请核对或登录');el('email').focus();}
  else if(status===422){showError('password','教学服务端拒绝该密码，请更换');el('password').focus();}
  else if(status===429){el('message').textContent='教学限流：稍后重试，不要连续提交';}
  else{throw new Error('request-demo-17');}
 }catch(error){el('message').textContent='提交失败，输入已保留。教学请求ID：'+error.message;}
 finally{busy=false;el('submit').disabled=false;el('submit').textContent='注册';}
});
</script></html>