移动端表单提交前如何用 setCustomValidity 自定义校验逻辑
当浏览器默认校验规则无法满足业务需求时，可使用 Constraint Validation API 的 setCustomValidity 方法自定义错误提示信息。
使用 setCustomValidity 方法设置自定义错误提示
Constraint Validation API 提供了 setCustomValidity(message) 方法，允许开发者针对特定表单元素设置自定义的校验结果。该方法接受一个字符串参数，当传入空字符串时表示校验通过，传入非空字符串则表示校验失败并显示该字符串作为错误提示。此方法适用于 input、select、textarea 等表单元素，以及 fieldset 和 output 元素。
在实现复杂校验逻辑时，通常需要结合 JavaScript 的事件监听机制。例如，当用户修改表单内容时触发校验函数，函数内部根据业务规则判断输入值是否符合要求。如果不符合，调用 setCustomValidity 方法传入错误信息；如果符合，则传入空字符串。这种方式可以完全覆盖浏览器默认的校验行为，实现更灵活的交互体验。
结合事件监听实现动态校验逻辑
为了确保校验逻辑实时生效，需要将自定义校验函数绑定到表单元素的特定事件上。常见的做法是将函数绑定到 input 事件或 change 事件，这样每当用户输入或选择发生变化时，都会触发校验检查。例如，针对国家选择和邮政编码输入框，可以分别绑定事件监听器，确保在用户切换国家或输入邮编时立即执行校验。
在编写校验函数时，应先获取表单元素的引用，然后根据当前值执行具体的校验逻辑。例如，根据选择的国家动态生成正则表达式，用于匹配不同国家的邮政编码格式。如果匹配成功，调用 setCustomValidity('') 清除之前的错误提示；如果匹配失败，调用 setCustomValidity('错误信息') 设置新的错误提示。这种动态校验方式能够有效提升用户体验。
验证自定义校验逻辑的执行结果
验证自定义校验逻辑是否生效，可以通过检查浏览器是否显示错误提示信息来实现。在测试时，故意输入不符合规则的值，例如在瑞士选项下输入非 4 位数字的邮编，或输入不符合荷兰格式的字符。如果校验逻辑正确，浏览器应立即显示自定义的错误提示信息，而不是使用默认的提示。
此外，还可以通过调用 reportValidity() 方法来主动触发校验并显示错误信息。该方法会检查当前元素的校验状态，并在校验失败时向用户报告错误。在测试过程中，确保校验函数在事件触发时被正确调用，并且 setCustomValidity 方法能够正确设置和清除错误信息，从而验证整个校验流程的完整性。
注意客户端校验与服务器端校验的配合
Constraint Validation API 主要用于客户端的即时校验，能够提升用户输入时的交互体验。然而，它并不能替代服务器端的校验。浏览器开发者工具、手动构造的 HTTP 请求或程序化设置表单值等方式，都可能绕过客户端校验。因此，必须在服务器端再次执行校验逻辑，以确保数据的安全性和一致性。
在实现时，应确保客户端和服务器端的校验规则保持一致。例如，如果客户端限制了文件大小为 75 kB，服务器端也应执行相同的检查。通过这种双重校验机制，可以有效防止无效数据提交到服务器，同时为用户提供清晰的错误反馈。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。