理解表单提交与页面跳转的默认行为
在html中，一个基本的表单在用户点击提交按钮后，会根据action属性指定的url和method属性指定的http方法，将表单数据发送到服务器，并通常导致页面跳转。然而，在许多场景下，我们希望在数据发送之前，对用户输入进行初步的有效性检查，特别是确保所有必填项都已填写。
考虑以下一个简单的登录表单：
在这个例子中，无论用户是否填写了输入框，点击“登录”按钮后，表单都会直接提交到home.php并尝试进行页面跳转。这显然不符合用户体验和数据完整性的要求。
使用HTML required 属性实现必填验证
HTML5引入了required属性，为表单元素提供了原生的必填项验证功能。当一个input、select或textarea元素被标记为required时，浏览器会在表单提交前自动检查该元素是否为空。如果为空，浏览器会阻止表单提交，并显示一个默认的验证提示信息，从而确保用户必须填写该字段才能继续。
将上述表单修改为使用required属性：
立即学习“前端免费学习笔记（深入）”；
现在，当用户尝试提交表单而未填写任一带有required属性的输入框时，浏览器会立即阻止提交行为，并弹出提示告知用户该字段为必填项。只有当所有required字段都被填写后，表单才能成功提交并跳转到home.php页面。
结合 pattern 属性进行进阶验证
除了简单的必填验证，HTML5还提供了pattern属性，允许开发者通过正则表达式定义输入值的格式要求。这使得客户端验证更加强大和灵活。
例如，如果我们希望“邮箱或手机号”字段必须是有效的邮箱格式，或者“手机号”字段必须是特定位数的数字，可以结合pattern属性：
在上述示例中：
- pattern="^(\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)|(1[3-9]\d{9})$"：这个正则表达式匹配一个标准的邮箱格式或者以13-19开头的11位手机号码。
- pattern="^1[3-9]\d{9}$"：这个正则表达式严格匹配以13-19开头的11位手机号码。
- title属性：当输入不符合pattern定义的格式时，浏览器会显示title属性的值作为提示信息，提升用户体验。
通过required和pattern属性的结合使用，我们可以在客户端实现相当程度的表单数据有效性检查。
注意事项与总结
- 客户端验证的局限性： 尽管HTML5的required和pattern属性提供了便捷的客户端验证功能，但它们主要用于提升用户体验，减少无效提交。恶意用户可以轻易绕过客户端验证（例如通过浏览器开发者工具修改HTML或直接发送HTTP请求）。
- 服务器端验证的必要性： 无论何时，都必须在服务器端对所有接收到的数据进行严格的验证和清理。 这是确保应用程序安全、数据完整性和业务逻辑正确性的唯一可靠方式。客户端验证只是第一道防线，服务器端验证才是核心。
- 用户体验优化： 浏览器默认的验证提示样式可能不符合网站的整体设计。开发者可以通过CSS（例如伪类:valid, :invalid, :required等）或JavaScript库来定制验证提示的样式和行为，以提供更友好的用户界面。
- 兼容性： 现代浏览器普遍支持required和pattern属性。对于旧版浏览器，可能需要使用JavaScript进行回退（polyfill）处理。
总结 通过在HTML表单输入元素上简单地添加required属性，我们可以轻松实现客户端的必填项验证，有效控制表单的提交行为和后续的页面跳转。结合pattern属性，可以进一步增强验证的精确性。然而，始终要牢记，客户端验证是辅助手段，服务器端验证才是保障数据安全和系统稳定的基石。
