在发布前审查这段生成的用户名表单。
使用可访问反馈验证用户名，检查可用性且不产生过期结果，并且只提交由服务器独立接受的数据。
HTML
<form id="signup" novalidate>
<label for="username">Username</label><input id="username" name="username" minlength="3" />
<span id="username-error"></span>
<button>Create account</button>
</form>
<script>
const form = document.querySelector('#signup');
const input = document.querySelector('#username');
input.addEventListener('input', async () => {
const response = await fetch(`/api/users/${input.value}`);
const { available } = await response.json();
if (!available) {
input.setCustomValidity('Username is already taken');
input.insertAdjacentHTML('afterend', '<span role="alert">Taken</span>');
}
});
form.addEventListener('submit', (event) => {
event.preventDefault();
if (!input.checkValidity()) return;
fetch('/api/signup', {
method: 'POST',
body: JSON.stringify({ username: input.value, validated: true })
});
});
</script>
生成代码仅作示例，不代表任何特定模型