JavaScript大前端java
jQuery 前端开发核心指南：语法、DOM 操作及 Validate 插件
jQuery 作为轻量级 JavaScript 库，简化了 DOM 操作、事件处理与 Ajax 交互。文章涵盖选择器用法、文档加载 ready 方法、内容与样式操作、事件绑定（直接/委托）、节点增删改查及 Validate 表单验证插件配置。通过封装原生 API 提升开发效率，解决浏览器兼容性问题，适用于静态与动态元素交互场景。
jQuery 作为轻量级 JavaScript 库，简化了 DOM 操作、事件处理与 Ajax 交互。文章涵盖选择器用法、文档加载 ready 方法、内容与样式操作、事件绑定（直接/委托）、节点增删改查及 Validate 表单验证插件配置。通过封装原生 API 提升开发效率，解决浏览器兼容性问题，适用于静态与动态元素交互场景。
在前端开发中，JavaScript 虽能实现 DOM 操作、事件处理等核心功能，但代码往往冗长繁琐，且浏览器兼容性问题突出。而 jQuery 的出现，以'write less, do more'为设计理念，对 JavaScript 进行了高效封装，极大简化了前端开发流程。
jQuery 由美国人 John Resig 于 2006 年创建，是对 JavaScript 对象和函数的轻量级封装库，至今仍是前端开发中处理 DOM、事件的常用工具。
append()、remove()）。$("li").css("color", "red") 可将所有 <li> 文字设为红色）。引入：在 HTML 文件中通过 <script> 标签引入本地 jQuery 文件，需注意引入顺序（先引入 jQuery，再引入自定义 JS）：
<!-- 引入本地 jQuery 文件（路径需根据实际项目结构调整） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 引入自定义 JS（需在 jQuery 之后） -->
<script type="text/javascript" src="js/custom.js"></script>
jQuery 的核心语法是 $(选择器|DOM 元素)，返回的是一个jQuery 对象集合（即使仅匹配一个元素，也会封装为集合），需通过 jQuery 方法操作（而非原生 DOM 方法）。
jQuery 支持多种选择器，覆盖大多数场景，以下是高频用法及示例：
| 选择器类型 | 语法示例 | 说明 |
|---|---|---|
| 标签选择器 | $("h1") | 选择页面中所有 <h1> 标签 |
| 类选择器 | $(".box") | 选择所有类名为 box 的元素 |
| ID 选择器 | $("#loginBtn") | 选择 ID 为 loginBtn 的元素（仅返回第一个，ID 应唯一） |
| 并集选择器 | $("h1, div, .box") | 选择所有 <h1>、<div> 标签及类名为 box 的元素 |
| 后代选择器 | $(".box input") | 选择类名为 box 的元素下所有层级的 <input>（含子、孙级） |
| 子代选择器 | $(".box > input") | 选择类名为 box 的元素下直接子级的 <input>（仅一级） |
| 属性选择器 | $("[type='text']") | 选择所有 type 属性值为 text 的元素 |
| 过滤选择器 - 首/尾 | $("div:first")/$("div:last") | 选择所有 <div> 中的第一个/最后一个 |
| 过滤选择器 - 奇偶下标 | $("div:even")/$("div:odd") | 选择所有 <div> 中下标为偶数/奇数的元素（下标从 0 开始） |
| 过滤选择器 - 指定下标 | $("div:eq(2)") | 选择所有 <div> 中下标为 2 的元素（精准匹配单个元素） |
| 过滤选择器 - 范围下标 | $("div:gt(1)")/$("div:lt(1)") | 选择所有 <div> 中下标大于 1/小于 1 的元素 |
| 过滤选择器 - 焦点 | $("input:focus") | 选择当前获得焦点的 <input> 元素 |
| 文档选择器 | $(document) | 选择整个文档对象（常用于绑定文档加载事件） |
注意：jQuery 选择器返回的是 jQuery 对象集合，若需使用原生 DOM 方法（如
innerHTML、textContent），需通过下标（$("div")[0]）或get(0)转换为原生 DOM 元素。
ready 方法用于指定'DOM 树加载完成后执行的代码'，避免因 DOM 未加载而导致的元素查找失败问题，有两种常用写法：
// 1. 完整写法：明确绑定 document 对象
$(document).ready(function(){
// DOM 加载完成后执行的代码（如操作 DOM、绑定事件）
console.log("DOM 已加载完成（完整写法）");
});
// 2. 简化写法（推荐）：省略 document 和 ready 关键字
$(function(){
// 功能与完整写法一致，代码更简洁
console.log("DOM 已加载完成（简化写法）");
});
区别于
window.onload：ready仅需 DOM 树加载完成即可执行，无需等待图片、样式表等资源；而window.onload需等待所有资源加载完成后才执行，因此ready执行时机更早。
jQuery 提供了简洁的方法操作 DOM 元素的内容、属性和样式，无需手动处理原生 DOM 对象的兼容性问题。
根据需求选择 text() 或 html() 方法，前者处理纯文本，后者支持 HTML 标签解析：
text()：获取/设置元素的纯文本内容（不解析 HTML 标签）。html()：获取/设置元素的HTML 内容（会解析 HTML 标签，生成对应 DOM 结构）。示例：
<body>
<div class="error"></div>
<div class="info"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 设置纯文本（不解析 HTML 标签）
$(".error").text("账号或密码错误");
// 若用 text() 设置 HTML 标签，会原样显示标签文本
// $(".error").text("<span>账号或密码错误</span>"); // 显示：<span>账号或密码错误</span>
// 2. 设置 HTML 内容（解析 HTML 标签）
$(".info").html("<h1>欢迎登录系统</h1>");
// 会生成 <h1> 标签并显示
// 3. 获取内容
console.log($(".error").text()); // 输出：账号或密码错误
console.log($(".info").html()); // 输出：<h1>欢迎登录系统</h1>
// 4. 处理 jQuery 集合：若匹配多个元素，text()/html() 会批量操作
$("div").text("批量设置文本"); // 所有 <div> 都会显示'批量设置文本'
});
</script>
</body>
根据属性类型选择对应方法，val() 专门处理表单元素的 value 属性，attr() 处理普通属性和自定义属性：
val()：获取/设置 <input>、<select>、<textarea> 等表单元素的 value 属性。attr(属性名)：获取元素指定属性的值（支持原生属性和自定义属性）。attr(属性名，属性值)：设置元素指定属性的值。removeAttr(属性名)：删除元素指定属性（包括自定义属性）。示例：
<body>
<!-- 表单元素 -->
<input type="text" value="初始值" id="userInput" data-user="admin">
<!-- 自定义属性元素 -->
<div id="content" data-info="这是测试内容"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 操作表单元素的 value 属性（推荐用 val()）
let inputVal = $("#userInput").val();
console.log("初始 value：", inputVal); // 输出：初始值
$("#userInput").val("修改后的 value"); // 设置新的 value
// 2. 操作普通属性（如 type）
let inputType = $("#userInput").attr("type");
console.log("input 类型：", inputType); // 输出：text
$("#userInput").attr("type","password");
userData = $().();
.(, userData);
contentInfo = $().();
.(, contentInfo);
$().(,);
$().();
.(, $().());
});
jQuery 支持操作行内样式和类样式，类样式更适合批量样式管理，行内样式适合动态修改单个样式。
width() 和 height() 方法用于获取/设置元素的宽高，默认操作'内容区'尺寸（不含 padding、border、margin）：
width()：获取/设置元素宽度。height()：获取/设置元素高度。innerWidth()（内容区+padding）、outerWidth()（内容区+padding+border）、outerWidth(true)（内容区+padding+border+margin），高度同理。示例：
<body>
<div class="box" style="width: 200px;padding: 10px;border: 2px solid #000;margin: 5px;"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let box = $(".box");
// 1. 获取宽度（默认获取内容区宽度，不含 padding、border）
let contentWidth = box.width();
console.log("内容区宽度：", contentWidth); // 输出：200
// 2. 获取包含 padding 的宽度
let innerW = box.innerWidth();
console.log("内容区+padding 宽度：", innerW); // 输出：200 + 10*2 = 220
// 3. 获取包含 padding+border 的宽度
let outerW = box.outerWidth();
console.log("内容区+padding+border 宽度：", outerW); // 输出：220 + 2*2 = 224
// 4. 获取包含 padding+border+margin 的宽度
let outerWWithMargin = box.outerWidth(true);
console.log("完整宽度（含 margin）：", outerWWithMargin); // 输出：224 + 5*2 = 234
// 5. 设置宽度（默认设置内容区宽度）
box.();
.(, box.());
});
css() 方法用于获取/设置元素的行内样式，支持单个样式和批量样式设置，需注意样式属性的命名规则（驼峰命名法）：
css(样式属性名)：获取元素指定行内样式的值（若未设置行内样式，会返回计算后的样式值）。css(样式属性名，样式属性值)：设置元素指定行内样式。css({样式 1: 值 1, 样式 2: 值 2, ...})：批量设置行内样式（样式属性含中横线时，需改为驼峰命名，如 font-size → fontSize）。示例：
<body>
<div class="info">这是测试文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let info = $(".info");
// 1. 单个样式设置（驼峰命名）
info.css("backgroundColor","skyblue"); // 等价于 CSS 中的 background-color: skyblue
info.css("fontSize","18px"); // 等价于 CSS 中的 font-size: 18px
// 2. 批量样式设置（对象形式）
info.css({
color:"white", // 文本颜色（无中横线，直接写 color）
padding:"10px 15px", // 内边距（无中横线，直接写 padding）
border:"1px solid #ccc", // 边框（复合属性可直接写）
borderRadius:"5px" // 等价于 CSS 中的 border-radius: 5px
});
// 3. 获取样式值
let bgColor = info.css("backgroundColor");
console.log("背景色：", bgColor); // 输出：rgb(135, 206, 235)（浏览器计算后的颜色值）
let fontSize = info.css();
.(, fontSize);
});
类样式通过预定义 CSS 类来管理样式，适合批量样式切换（如'激活态''隐藏态'），常用方法如下：
addClass(类名)：为元素添加指定类样式（可添加多个类，用空格分隔，如 addClass("active highlight")）。removeClass(类名)：为元素移除指定类样式（可移除多个类，用空格分隔）。toggleClass(类名)：切换类样式（元素有该类则移除，无则添加）。hasClass(类名)：判断元素是否包含指定类样式，返回布尔值（true 包含，false 不包含）。示例：
<style>
/* 预定义类样式 */
.active{background-color: #4CAF50;color: white;padding: 8px 12px;border-radius: 4px;}
.highlight{border: 2px solid #ff9800;box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);}
</style>
<body>
<button id="btn">点击切换样式</button>
<div class="text">这是一段可激活的文本</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let btn = $("#btn");
let text = $(".text");
// 按钮点击事件：切换类样式
btn.click(function(){
text.();
(text.()){
text.();
}{
text.();
}
.(, text.());
.(, text.());
});
});
jQuery 简化了事件绑定流程，支持直接绑定（静态元素）和委托绑定（动态元素），覆盖大多数用户交互场景。
| 事件名 | 说明 | 适用元素 |
|---|---|---|
click | 鼠标左键单击 | 所有可交互元素（按钮、链接、div 等） |
dblclick | 鼠标左键双击 | 同 click |
blur | 元素失去焦点 | 表单元素（input、select、textarea 等） |
focus | 元素获得焦点 | 同 blur |
keydown | 键盘按键按下（按住时持续触发） | 所有可获取焦点的元素 |
keyup | 键盘按键释放 | 同 keydown |
mouseenter | 鼠标移入元素（不冒泡，子元素不触发） | 所有元素 |
mouseleave | 鼠标移出元素（不冒泡，子元素不触发） | 同 mouseenter |
mousemove | 鼠标在元素内移动（持续触发） | 所有元素 |
change | 元素内容改变（失去焦点后触发） | 表单元素（input、select、textarea 等） |
submit | 表单提交（点击提交按钮或按 Enter 触发） | <form> 元素 |
静态元素指页面加载时已存在的元素，可通过'事件名方法'或 on() 方法直接绑定事件：
$(选择器).事件名 (回调函数)。on() 方法）：$(选择器).on("事件名", 回调函数)（更灵活，支持解绑）。示例：
<body>
<input type="text" id="userInput" placeholder="请输入内容">
<button id="submitBtn">提交</button>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 输入框焦点事件（focus + blur）
$("#userInput").focus(function(){
// 获得焦点：添加边框样式
$(this).css("border","2px solid #4CAF50");
}).blur(function(){
// 失去焦点：恢复默认边框
$(this).css("border","1px solid #ccc");
// 失去焦点时获取输入值
let inputVal = $(this).val();
console.log("输入内容：", inputVal);
});
// 2. 按钮点击事件（两种写法）
// 写法 1：事件名方法
$("#submitBtn").click(function(){
();
});
});
动态元素指页面加载后通过 JS 动态生成的元素（如点击按钮添加的 <tr>、<div> 等），直接绑定事件无效，需用 on() 委托绑定（将事件委托给静态父元素）：
$(静态父元素).on("事件名", 动态元素选择器，回调函数)。示例：
<body>
<button id="addRowBtn">添加表格行</button>
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr><th>姓名</th><th>操作</th></tr>
</thead>
<tbody id="tableBody"><!-- 动态生成的行将插入这里 --></tbody>
</table>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let rowCount = 1; // 行计数器，用于生成不同姓名
// 1. 点击按钮添加动态行
$("#addRowBtn").click(function(){
let newRow = `
<tr>
<td>用户${rowCount}</td>
<td>
<button>删除</button>
</td>
</tr>
`;
$().(newRow);
rowCount++;
});
$().(,,(){
isConfirm = ();
(isConfirm){
$().().();
.();
}
});
});
节点操作是 DOM 操作的核心，jQuery 提供了直观的方法处理节点的创建、插入、替换、删除和遍历，简化原生 JS 的复杂流程。
$(HTML 字符串) 语法创建 jQuery 节点对象（后续可通过插入方法添加到 DOM 树）。$("#id")、$(".class")）获取已存在的节点，返回 jQuery 集合。$(原生 DOM 元素) 将原生 DOM 元素转换为 jQuery 对象，以便使用 jQuery 方法。示例：
<body>
<div id="container"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 创建节点：创建一个 <div> 节点（包含子元素和属性）
let newDiv = $(`
<div>
<p>这是创建的新节点</p>
<button>节点按钮</button>
</div>
`);
// 2. 获取节点：获取页面中已存在的 #container 节点
let container = $("#container");
// 3. 转换节点：将原生 DOM 元素转换为 jQuery 对象
let nativeDom = document.getElementById("container"); // 原生 DOM 元素
let jqueryDom = $(nativeDom); // 转换为 jQuery 对象
console.log("原生 DOM 元素：", nativeDom);
console.log("转换后的 jQuery 对象：", jqueryDom);
// 4. 将创建的节点添加到容器（后续'插入节点'会详细讲解）
container.append(newDiv);
});
</script>
</body>
插入节点用于将创建的节点添加到 DOM 树的指定位置，jQuery 提供了多种插入方法，可根据需求选择'内部插入'或'外部插入'：
| 插入类型 | 方法 | 说明 | 示例 |
|---|---|---|---|
| 内部插入 - 末尾 | parent.append(child) | 将 child 节点插入到 parent 节点的内部末尾（子元素的最后一位） | $("#container").append(newDiv) |
| 内部插入 - 末尾 | child.appendTo(parent) | 与 append() 相反，将 child 节点插入到 parent 节点的内部末尾 | newDiv.appendTo($("#container")) |
| 内部插入 - 开头 | parent.prepend(child) | 将 child 节点插入到 parent 节点的内部开头（子元素的第一位） | $("#container").prepend(newDiv) |
| 内部插入 - 开头 | child.prependTo(parent) | 与 prepend() 相反，将 child 节点插入到 parent 节点的内部开头 | newDiv.prependTo($("#container")) |
| 外部插入 - 后面 | sibling.after(newNode) | 将 newNode 节点插入到 sibling 节点的外部后面（与 sibling 同级） | $("#box").after(newDiv) |
| 外部插入 - 后面 | newNode.insertAfter(sibling) | 与 after() 相反，将 newNode 节点插入到 sibling 节点的外部后面 | newDiv.insertAfter($("#box")) |
| 外部插入 - 前面 | sibling.before(newNode) | 将 newNode 节点插入到 sibling 节点的外部前面（与 sibling 同级） | $("#box").before(newDiv) |
| 外部插入 - 前面 | newNode.insertBefore(sibling) | 与 before() 相反，将 newNode 节点插入到 sibling 节点的外部前面 | newDiv.insertBefore($("#box")) |
示例：
<body>
<div id="container"><p>容器内原有内容</p></div>
<div id="sibling">参考同级元素</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 创建要插入的节点
let newNode = $("<div>这是插入的节点</div>");
// 1. 内部插入：插入到 #container 内部
// 内部末尾（原有 <p> 后面）
$("#container").append(newNode.clone()); // clone() 复制节点，避免节点被移动
// 内部开头（原有 <p> 前面）
$("#container").prepend(newNode.clone());
// 2. 外部插入：插入到 #sibling 同级位置
// 外部后面（#sibling 后面）
$("#sibling").after(newNode.clone());
// 外部前面（#sibling 前面）
$("#sibling").before(newNode);
});
</script>
</body>
target.replaceWith(newNode)：用 newNode 节点替换 target 节点（target 节点会从 DOM 树中移除）。node.empty()：清空 node 节点的所有子内容（包括子节点和文本），但 node 节点本身保留。node.remove()：将 node 节点（包括所有子内容）从 DOM 树中彻底移除，后续无法再使用该节点。示例：
<body>
<div id="oldDiv">这是要被替换的旧节点</div>
<div id="deleteDiv"><p>这是要被删除的内容</p><input type="text" placeholder="输入框"></div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 1. 替换节点：用新节点替换 #oldDiv
let newDiv = $("<div>这是替换后的新节点</div>");
$("#oldDiv").replaceWith(newDiv); // 替换后，#oldDiv 已从 DOM 树中移除，无法再获取
console.log("替换后 #oldDiv 是否存在：", $("#oldDiv").length); // 输出：0
// 2. 清空节点：清空 #deleteDiv 的子内容（节点本身保留）
$("#deleteDiv").empty();
console.log("清空后 #deleteDiv 的子内容：", $("#deleteDiv").html()); // 输出：""
// 3. 彻底删除节点：删除 #deleteDiv（包括节点本身）
$("#deleteDiv").();
.(, $().);
});
查找节点用于在已有的 DOM 树中查找指定关系的节点（如父节点、子节点、同辈节点等），常用方法如下：
| 方法 | 说明 | 示例 |
|---|---|---|
children([选择器]) | 获取当前节点的直接子节点（仅一级，不含孙级），可选参数'选择器'用于筛选子节点 | $("#container").children("div")（获取 #container 下直接子级的 div） |
parent() | 获取当前节点的直接父节点（仅一级） | $(".child").parent()（获取 .child 的直接父节点） |
closest(选择器) | 沿 DOM 树向上查找最近的匹配选择器的父节点（包括当前节点本身） | $(".btn").closest("form")（查找 .btn 最近的 form 父节点） |
next([选择器]) | 获取当前节点的紧邻的下一个同辈节点，可选参数'选择器'用于筛选 | $("li:first").next()（获取第一个 li 的下一个同辈 li） |
prev([选择器]) | 获取当前节点的紧邻的上一个同辈节点，可选参数'选择器'用于筛选 | $("li:last").prev()（获取最后一个 li 的上一个同辈 li） |
siblings([选择器]) | 获取当前节点的所有同辈节点（不包括自身），可选参数'选择器'用于筛选 | $("li.active").siblings()（获取 .active li 的所有同辈 li） |
find(选择器) | 在当前节点的所有子节点（包括子、孙、曾孙等） 中查找匹配选择器的节点 | $("#container").find(".item")（获取 #container 下所有 .item 节点） |
first() | 获取 jQuery 集合中的第一个节点 | $("li").first()（获取所有 li 中的第一个） |
last() | 获取 jQuery 集合中的最后一个节点 | $("li").last()（获取所有 li 中的最后一个） |
示例：
<body>
<div class="grandparent">
<div class="parent">
<div class="child item">子节点 1</div>
<div class="child">子节点 2</div>
<div class="child item">子节点 3</div>
</div>
<div class="sibling">同辈节点</div>
</div>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
let child2 = $("div.child:eq(1)"); // 获取'子节点 2'
// 1. 查找直接子节点
let parentChildren = $(".parent").children();
console.log("parent 的直接子节点数量：", parentChildren.length); // 输出：3
parentItemChildren = $().();
.(, parentItemChildren.);
child2Parent = child2.();
.(, child2Parent.());
closestGrandparent = child2.();
.(, closestGrandparent.());
child2Next = child2.();
.(, child2Next.());
child2Prev = child2.();
.(, child2Prev.());
child2Siblings = child2.();
.(, child2Siblings.);
allItems = $().();
.(, allItems.);
firstChild = $().();
.(, firstChild.());
lastChild = $().();
.(, lastChild.());
});
当需要对 jQuery 集合中的每个节点执行相同操作时，可使用 each() 方法遍历集合，回调函数中可获取每个节点的下标和原生 DOM 元素：
$(选择器).each(function(index, nativeDom) { ... })。
index：当前节点在集合中的下标（从 0 开始）。nativeDom：当前节点的原生 DOM 元素（如需使用 jQuery 方法，需转换为 jQuery 对象：$(nativeDom)）。示例：
<body>
<ul id="fruitList">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
</ul>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 遍历所有 li 节点
$("#fruitList li").each(function(index, nativeDom){
// 1. 获取下标和原生 DOM 元素的内容
let fruitName = nativeDom.textContent; // 原生 DOM 方法
console.log(`下标 ${index}：${fruitName}`); // 输出：下标 0：苹果，下标 1：香蕉，等
// 2. 转换为 jQuery 对象，执行 jQuery 方法
let $currentLi = $(nativeDom);
// 下标为偶数的 li 设为红色，奇数设为蓝色
if(index % 2 === 0){
$currentLi.css("color",);
}{
$currentLi.(,);
}
$currentLi.((){
();
});
});
});
表单验证是前端常见需求（如注册、登录表单），jQuery Validate 插件提供了丰富的验证规则和自定义功能，无需手动编写复杂的验证逻辑，极大提升开发效率。
jQuery Validate 内置了多种常用验证规则，可直接在表单元素或配置中使用：
| 规则 | 描述 | 适用场景 |
|---|---|---|
required: true | 必须输入的字段（不能为空） | 账号、密码、邮箱等必填项 |
remote: "url" | 通过 Ajax 请求验证输入值（如验证账号是否已存在） | 唯一性验证（账号、手机号等） |
email: true | 必须输入正确格式的电子邮件（如 [email protected]） | 邮箱输入框 |
url: true | 必须输入正确格式的网址（如 http://xxx.com 或 https://xxx.com） | 个人主页、链接输入框 |
date: true | 必须输入正确格式的日期（如 2024/05/20），注意：IE6 不兼容 | 日期输入框（需谨慎使用） |
dateISO: true | 必须输入 ISO 格式的日期（如 2024-05-20），仅验证格式，不验证有效性 | 日期输入框（推荐使用） |
number: true | 必须输入合法的数字（支持负数、小数） | 年龄、金额等数字输入框 |
digits: true | 必须输入整数（不支持负数、小数） | 手机号、身份证号（纯数字部分）等 |
creditcard: true | 必须输入合法的信用卡号（验证格式和校验位） | 信用卡号输入框 |
equalTo: "#targetId" | 输入值必须与 #targetId 元素的值一致 | 确认密码、确认邮箱等 |
accept: ".(jpg 或 png 或 gif)$" | 输入的文件后缀必须匹配指定格式（仅用于文件上传） | 文件上传输入框（如头像上传） |
maxlength: 15 | 输入长度最多为 15 个字符（汉字算 1 个字符） | 账号、昵称等（限制最大长度） |
minlength: 8 | 输入长度最少为 8 个字符（汉字算 1 个字符） | 密码等（限制最小长度） |
rangelength: [8, 15] | 输入长度必须介于 8~15 个字符之间（汉字算 1 个字符） | 账号、密码等（限制长度范围） |
max: 100 | 输入值不能大于 100（适用于数字） | 年龄（如最大 100 岁）、数量等 |
min: 0 | 输入值不能小于 0（适用于数字） | 金额、数量等（非负） |
range: [0, 100] | 输入值必须介于 0~100 之间（适用于数字） | 年龄（0 |
使用 jQuery Validate 插件需遵循以下步骤，核心是'引入文件→编写表单→初始化验证'：
需引入 3 个文件（jQuery 核心库、Validate 插件核心库、中文提示库，中文提示库可选）：
<!-- 1. 引入 jQuery 核心库（必须在 Validate 之前） -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- 2. 引入 Validate 插件核心库 -->
<script type="text/javascript" src="js/jquery.validate.js"></script>
<!-- 3. 引入中文提示库（可选，用于将默认英文提示改为中文） -->
<script type="text/javascript" src="js/messages_zh.js"></script>
表单元素需添加 name 属性（Validate 插件通过 name 绑定验证规则），且建议为必填项添加 required 属性（或在配置中设置 required: true）：
<form id="registerForm" method="post" action="register.php">
<!-- 账号：必填，长度 8~15 字符 -->
<div class="form-item">
<label for="username">账号：</label>
<input type="text" id="username" name="username" placeholder="请输入账号（8-15 字符）">
</div>
<!-- 密码：必填，长度 8~20 字符 -->
<div class="form-item">
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码（8-20 字符）">
</div>
<!-- 确认密码：必填，需与密码一致 -->
<div class="form-item">
< =>确认密码：
邮箱：
年龄：
注册
通过 $("#formId").validate({ ... }) 初始化验证，配置中可设置验证规则（rules）、提示信息（messages）、验证通过后的回调（submitHandler）等：
$(function(){
// 初始化表单验证
$("#registerForm").validate({
// 1. 验证规则：key 为表单元素的 name 属性，value 为规则对象
rules:{
username:{
required:true, // 必填
minlength:8, // 最小长度 8
maxlength:15 // 最大长度 15
},
password:{
required:true,
minlength:8,
maxlength:20
},
confirmPwd:{
required:true,
equalTo:"#password" // 必须与 #password 的值一致
},
email:{
required:true,
email:true // 验证邮箱格式
},
age:{
required:true,
number:true, // 必须是数字
range:[0,120] // 范围 0~120
}
},
// 2. 自定义提示信息：key 与 rules 对应，value 为提示文本
messages:{
username:{
:,
:,
:
},
:{
:,
:,
:
},
:{
:,
:
},
:{
:,
:
},
:{
:,
:,
:
}
},
:(){
form.();
}
});
});
submitHandler 中的逻辑（如 Ajax 提交）。messages_zh.js 后，默认提示文本会改为中文（如'这是必填字段''请输入正确的邮箱格式'），无需手动编写所有提示信息。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online