如何使用 JavaScript 实现网页表单验证功能?
const form = document.querySelector('#myForm');
const input = document.querySelector('#username');
const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
form.addEventListener('submit', function(event) {
event.preventDefault();
//必填字段验证
if (input.value === '') {
showError('用户名不能为空');
return;
}
//格式匹配验证
if (!emailPattern.test(input.value)) {
showError('请输入有效的电子邮件地址');
return;
}
//表单验证通过,提交表单
form.submit();
});
function showError(message) {
const errorDiv = document.createElement('div');
errorDiv.textContent = message;
form.insertBefore(errorDiv, form.firstElementChild);
}登录后复制