必须用 jquery validate 插件实现表单验证，需引入 jquery 和插件资源，通过 id 初始化验证器；支持 class、html 属性和 js 对象三种规则声明方式，并可自定义规则如手机号校验。
要在网页中实现用户输入即时校验、错误提示自动显示、提交前拦截非法数据，必须用 jQuery Validate 插件写表单验证逻辑，不能只靠 HTML5 的 required 属性应付真实业务场景。
引入资源并初始化验证器
先确保页面已加载 jQuery（3.6.0 或更高版本），再引入 jquery.validate.min.js 文件，推荐使用 CDN：<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>。
在 DOM 加载完成后调用 $("#myForm").validate()，【表单必须有 id 属性，且该 id 值要与 JS 中选择器完全一致】，否则验证器无法绑定到目标表单。
这一步不做任何配置也能启用基础验证，但不会显示错误消息——因为默认错误容器是 label.error，若页面没定义对应样式或元素，提示就不可见。
用 class 属性快速声明验证规则
方法一：直接在 input 元素的 class 中添加规则关键词，多个规则用空格分隔。
<input type="text" name="email" class="required email">
方法二：支持组合规则，比如同时要求必填、最小长度 6、最大长度 20：class="required minlength-6 maxlength-20"。
注意：class 写法仅适用于内置规则，不支持 equalTo、remote 等需传参的规则；【class 中的规则名必须全小写，且连字符连接，如 minlength-6，不能写成 minLength:6】。
用 HTML 属性声明验证规则
第一步：给 input 添加 name 属性，jQuery Validate 依赖 name 定位字段，没有 name 将被忽略。
第二步：在标签上直接写验证属性，例如：<input type="text" name="phone" required phoneus>。
第三步：对需要参数的规则，赋值方式灵活，以下写法全部有效：rangelength="6,12"、rangelength="6 12"、rangelength="[6,12]"、minlength="6"。
HTML 属性方式兼容 HTML5 原生类型，<input type="email" required> 会被自动识别为 email + required 规则，无需额外 class 或 JS 配置。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
用 JS 对象精细配置 rules 和 messages
这是最可控的方式，适合复杂表单和多语言项目。
在 validate() 调用中传入配置对象：
rules: { username: { required: true, minlength: 2 }, password: { required: true, rangelength: [6, 20] } }
messages: { username: "用户名不能为空且至少2位", password: "密码长度必须在6到20位之间" }
messages 可以按字段、按规则逐条覆盖，默认中文提示已内置，但实际项目中建议显式定义，避免依赖插件版本的语言包加载顺序。
如果某个字段要同时满足多个条件又需不同提示，可嵌套写：username: { required: "用户名必填", minlength: jQuery.validator.format("用户名至少 {0} 个字符") }。
自定义验证规则（如手机号、身份证）
调用 $.validator.addMethod() 注册新规则，第一个参数是规则名，第二个是校验函数，第三个是默认错误消息。
例如添加 11 位中国大陆手机号验证：
$.validator.addMethod("mobileCN", function(value, element) { return this.optional(element) || /^1[3-9]\d{9}$/.test(value); }, "请输入有效的手机号");
注册后即可在 class、HTML 属性或 JS rules 中使用 mobileCN，如：<input name="mobile" mobilecn>。
注意：正则开头加 ^、结尾加 $，否则可能匹配到部分字符串导致误判；this.optional(element) 是必须的，它保证字段为空时不触发校验。
