js实现表单验证提交表单提交
表单验证与提交的 JavaScript 实现
基本表单验证
通过监听表单的 submit 事件，阻止默认提交行为，验证通过后手动提交表单。
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
if (username.trim() === '') {
alert('用户名不能为空');
return;
}
if (!/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email)) {
alert('请输入有效的邮箱地址');
return;
}
this.submit();
});实时验证反馈
在输入时实时验证并显示错误信息，提升用户体验。
const inputs = document.querySelectorAll('#myForm input');
inputs.forEach(input => {
input.addEventListener('blur', function() {
const errorElement = document.getElementById(`${this.id}Error`);
if (this.value.trim() === '' && this.required) {
errorElement.textContent = '此字段为必填项';
} else {
errorElement.textContent = '';
}
});
});使用约束验证API
利用HTML5内置的验证属性和API，减少自定义验证代码。
function validateForm() {
const form = document.getElementById('myForm');
if (!form.checkValidity()) {
form.reportValidity();
return false;
}
return true;
}AJAX表单提交
使用fetch API实现异步表单提交，处理服务器响应。
document.getElementById('myForm').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
try {
const response = await fetch('/submit', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
alert('提交成功');
} else {
alert(result.message || '提交失败');
}
} catch (error) {
alert('网络错误');
}
});表单重置处理
提交成功后重置表单状态。
function resetForm() {
document.getElementById('myForm').reset();
document.querySelectorAll('.error-message').forEach(el => {
el.textContent = '';
});
}密码强度验证
实现密码复杂度验证功能。
function checkPasswordStrength(password) {
const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/;
const mediumRegex = /^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})/;
if (strongRegex.test(password)) return '强';
if (mediumRegex.test(password)) return '中';
return '弱';
}这些方法涵盖了表单验证和提交的主要场景，可以根据实际需求组合使用或单独实现。
