使用 JavaScript 和 HTML5 实现强大的表单验证

表单验证是 Web 开发中不可或缺的一部分，它确保用户输入的数据符合预期格式和要求。通过客户端验证，我们可以提高用户体验，减少不必要的服务器请求。然而，客户端验证并不能替代服务器端验证，因为客户端验证可以被绕过。本文将介绍如何使用 JavaScript 和 HTML5 实现强大的表单验证。

HTML5 内置验证

HTML5 提供了一些内置的表单验证功能，例如 required, min, max, pattern 等。这些属性可以简单地添加到表单元素中，以实现基本的验证。

 <form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required minlength="3" maxlength="20">
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required minlength="8">
  
  <input type="submit" value="提交">
</form>复制

在这个例子中，required 属性确保字段不能为空，minlength 和 maxlength 属性限制了用户名的长度，type="email" 确保输入的邮箱地址格式正确。

JavaScript 自定义验证

虽然 HTML5 提供了基本的验证功能，但在某些情况下，我们需要更复杂的验证逻辑。这时，可以使用 JavaScript 编写自定义的验证逻辑。

 <form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  
  <input type="submit" value="提交">
</form>
 
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交
 
    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
 
    if (username.length < 3 || username.length > 20) {
      alert('用户名必须在 3 到 20 个字符之间');
      return;
    }
 
    if (!validateEmail(email)) {
      alert('请输入有效的邮箱地址');
      return;
    }
 
    if (password.length < 8) {
      alert('密码必须至少 8 个字符');
      return;
    }
 
    // 如果所有验证都通过，可以提交表单
    alert('表单验证通过，可以提交表单');
    // this.submit(); // 如果需要提交表单，可以取消注释这行
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>复制

在这个例子中，我们使用 JavaScript 监听表单的 submit 事件，并在事件处理函数中进行自定义验证。如果验证失败，阻止表单提交并显示错误提示。

使用正则表达式进行验证

正则表达式是验证字符串格式的强大工具。例如，验证邮箱、电话号码等。

 function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(String(email).toLowerCase());
}
 
function validatePhone(phone) {
  const re = /^\d{10}$/;
  return re.test(String(phone));
}复制

使用表单验证 API

HTML5 提供了一些内置的表单验证 API，这些 API 可以帮助你更容易地实现表单验证。

`checkValidity()`

checkValidity() 方法用于检查表单或表单元素是否满足所有的约束条件。如果满足，返回 true，否则返回 false。

 let form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    alert('请填写所有必填字段');
  }
});复制

`reportValidity()`

reportValidity() 方法与 checkValidity() 类似，但它会触发浏览器内置的验证提示，显示错误信息。

 let form = document.getElementById('myForm');
 
form.addEventListener('submit', function(event) {
  if (!form.reportValidity()) {
    event.preventDefault();
  }
});复制

`validity` 对象

每个表单元素都有一个 validity 对象，它包含多个布尔属性，用于表示不同的验证状态。

 let email = document.getElementById('email');
 
email.addEventListener('input', function() {
  if (email.validity.typeMismatch) {
    email.setCustomValidity('请输入有效的邮箱地址');
  } else {
    email.setCustomValidity('');
  }
});复制

validity 对象的常见属性包括：

valid: 如果元素满足所有的约束条件，返回 true。
valueMissing: 如果元素是必填项但没有值，返回 true。
typeMismatch: 如果元素的值不符合 type 属性的要求（例如 email 或 url），返回 true。
patternMismatch: 如果元素的值不符合 pattern 属性的要求，返回 true。
tooLong: 如果元素的值超过了 maxLength 属性的限制，返回 true。
tooShort: 如果元素的值少于 minLength 属性的限制，返回 true。
rangeUnderflow: 如果元素的值小于 min 属性的值，返回 true。
rangeOverflow: 如果元素的值大于 max 属性的值，返回 true。
stepMismatch: 如果元素的值不符合 step 属性的要求，返回 true。
badInput: 如果浏览器无法将用户的输入转换为有效的值（例如在 number 输入框中输入了非数字字符），返回 true。
customError: 如果元素设置了自定义的验证错误信息，返回 true。

`validationMessage` 属性

validationMessage 属性返回当前表单元素的验证错误信息。如果元素没有错误，返回空字符串。

 let email = document.getElementById('email');
 
email.addEventListener('input', function() {
  if (!email.checkValidity()) {
    console.log(email.validationMessage);
  }
});复制

使用第三方库

有许多第三方库可以简化表单验证的过程，例如：

Validator.js: 一个简单易用的字符串验证库。
Joi: 一个强大的数据验证库，适用于复杂的验证场景。
Yup: 一个用于对象模式验证的库，常用于表单验证。

 // 使用 Yup 进行表单验证
const yup = require('yup');
 
const schema = yup.object().shape({
  username: yup.string().min(3).max(20).required(),
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});
 
schema.validate({
  username: 'john',
  email: 'john@example.com',
  password: 'password123'
}).then(function(valid) {
  console.log('Valid');
}).catch(function(err) {
  console.log(err.errors);
});复制

实时验证

你可以在用户输入时实时验证表单字段，提供即时反馈。

 <form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <span id="usernameError" style="color:red;"></span>
  
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email">
  <span id="emailError" style="color:red;"></span>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <span id="passwordError" style="color:red;"></span>
  
  <input type="submit" value="提交">
</form>
 
<script>
  document.getElementById('username').addEventListener('input', function() {
    let username = this.value;
    let errorSpan = document.getElementById('usernameError');
    if (username.length < 3 || username.length > 20) {
      errorSpan.textContent = '用户名必须在 3 到 20 个字符之间';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  document.getElementById('email').addEventListener('input', function() {
    let email = this.value;
    let errorSpan = document.getElementById('emailError');
    if (!validateEmail(email)) {
      errorSpan.textContent = '请输入有效的邮箱地址';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  document.getElementById('password').addEventListener('input', function() {
    let password = this.value;
    let errorSpan = document.getElementById('passwordError');
    if (password.length < 8) {
      errorSpan.textContent = '密码必须至少 8 个字符';
    } else {
      errorSpan.textContent = '';
    }
  });
 
  function validateEmail(email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
  }
</script>复制

总结

通过结合 HTML5 内置验证、JavaScript 自定义验证、正则表达式和表单验证 API，你可以创建强大且用户友好的表单验证机制。记住，客户端验证不能替代服务器端验证，两者应该结合使用以确保数据的安全性和完整性。希望本文能帮助你更好地理解和实现表单验证。

	<form>
	<label for="username">用户名:</label>
	<input type="text" id="username" name="username" required minlength="3" maxlength="20">

	<label for="email">邮箱:</label>
	<input type="email" id="email" name="email" required>

	<label for="password">密码:</label>
	<input type="password" id="password" name="password" required minlength="8">

	<input type="submit" value="提交">
	</form>

	<form id="myForm">
	<label for="username">用户名:</label>
	<input type="text" id="username" name="username">

	<label for="email">邮箱:</label>
	<input type="email" id="email" name="email">

	<label for="password">密码:</label>
	<input type="password" id="password" name="password">

	<input type="submit" value="提交">
	</form>

	<script>
	document.getElementById('myForm').addEventListener('submit', function(event) {
	event.preventDefault(); // 阻止表单提交

	let username = document.getElementById('username').value;
	let email = document.getElementById('email').value;
	let password = document.getElementById('password').value;

	if (username.length < 3 \|\| username.length > 20) {
	alert('用户名必须在 3 到 20 个字符之间');
	return;
	}

	if (!validateEmail(email)) {
	alert('请输入有效的邮箱地址');
	return;
	}

	if (password.length < 8) {
	alert('密码必须至少 8 个字符');
	return;
	}

	// 如果所有验证都通过，可以提交表单
	alert('表单验证通过，可以提交表单');
	// this.submit(); // 如果需要提交表单，可以取消注释这行
	});

	function validateEmail(email) {
	const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	return re.test(String(email).toLowerCase());
	}
	</script>

	let form = document.getElementById('myForm');

	form.addEventListener('submit', function(event) {
	if (!form.checkValidity()) {
	event.preventDefault();
	alert('请填写所有必填字段');
	}
	});

	let form = document.getElementById('myForm');

	form.addEventListener('submit', function(event) {
	if (!form.reportValidity()) {
	event.preventDefault();
	}
	});

	let email = document.getElementById('email');

	email.addEventListener('input', function() {
	if (email.validity.typeMismatch) {
	email.setCustomValidity('请输入有效的邮箱地址');
	} else {
	email.setCustomValidity('');
	}
	});

	let email = document.getElementById('email');

	email.addEventListener('input', function() {
	if (!email.checkValidity()) {
	console.log(email.validationMessage);
	}
	});

	// 使用 Yup 进行表单验证
	const yup = require('yup');

	const schema = yup.object().shape({
	username: yup.string().min(3).max(20).required(),
	email: yup.string().email().required(),
	password: yup.string().min(8).required(),
	});

	schema.validate({
	username: 'john',
	email: 'john@example.com',
	password: 'password123'
	}).then(function(valid) {
	console.log('Valid');
	}).catch(function(err) {
	console.log(err.errors);
	});

使用 JavaScript 和 HTML5 实现强大的表单验证

HTML5 内置验证

JavaScript 自定义验证

使用正则表达式进行验证

使用表单验证 API

checkValidity()

reportValidity()

validity 对象

validationMessage 属性