jqzoom和Validate、Cookie

Posted on 9 月 19, 2026 by jack

jqzoom 图片放大镜组件

jquery.jqzoom.js：商品图片放大镜插件，电商网站常用。鼠标悬浮小图，弹出放大预览窗口。

依赖：jQuery、jquery.jqzoom.js、jqzoom.css
class="jqzoom"：容器标记
jqimg属性：指定大图地址；src是页面显示缩略图

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm37.aspx.cs" Inherits="WebApplication1.WebForm37" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
    <!-- jqzoom需要自行引入js和css，这里仅演示结构 -->
    <script src="include/jquery.jqzoom.js"></script>
    <link href="include/jqzoom.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function(){
            $(".jqzoom").jqueryzoom();
        });
    </script>
</head>
<body>
    <div class="jqzoom">
        <img src="images/02.jpg" jqimg="images/02.jpg" width="100" height="50" />
    </div>
</body>
</html>
Code language: HTML, XML (xml)

注意：现在jqzoom插件比较老旧，现代项目一般改用elevateZoom等替代。

jQuery Validate 表单验证组件

jquery.validate.js：表单校验插件，ASP.NET MVC内置支持，快速实现前端表单校验。

CDN

<script src="[https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js](https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js)"></script>
<script src="[https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js](https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js)"></script>
Code language: HTML, XML (xml)

中文提示消息扩展

$.extend($.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
    minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
    rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
    range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: $.validator.format("请输入一个最大为 {0} 的值"),
    min: $.validator.format("请输入一个最小为 {0} 的值")
});
Code language: JavaScript (javascript)

常用校验规则

规则	说明
required:true	必填
email:true	邮箱格式
digits:true	只能整数
equalTo:”#pwd”	和另一个框值一致（确认密码）
minlength / maxlength	最小/最大长度

完整示例（class方式，需要jquery.metadata.js）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm39.aspx.cs" Inherits="WebApplication1.WebForm39" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>validate表单验证</title>
<script src="[http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js](http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js)"></script>
<script src="[https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js](https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js)"></script>
<script src="include/jquery.metadata.js"></script>
<script>
$.extend($.validator.messages, {
    required: "必选字段",
    equalTo: "两次密码输入不一致"
});
$(function(){
    $("#myform").validate();
});
</script>
</head>
<body>
<form id="myform">
    <div>用户名：<input name="username" class="{required:true,minlength:3}" /></div>
    <div>邮箱：<input name="email" class="required email" /></div>
    <div>密码：<input type="password" id="password" name="password" class="{required:true,minlength:5}" /></div>
    <div>确认密码：<input type="password" name="confirm_password" class="{required:true,minlength:5,equalTo:'#password'}" /></div>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
Code language: HTML, XML (xml)

jQuery Cookie 记住用户名

知识点

jquery.cookie.js：操作Cookie插件，记住登录账号，关闭浏览器再打开还能读取。

$.cookie(name)：读取cookie
$.cookie(name,value,{expires:天数})：写入cookie并设置有效期
不设置expires：会话Cookie，关闭浏览器自动失效

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm40.aspx.cs" Inherits="WebApplication1.WebForm40" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Cookie记住用户名</title>
<script src="[http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js](http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js)"></script>
<script src="include/jquery.cookie.js"></script>
<script>
    $(function () {
        var cookieValue = $.cookie('loginname');
        $("#loginname").val(cookieValue);
    });
    function docolick()
    {
        $.cookie('loginname', $("#loginname").val(), { expires: 2 });
        alert("已保存用户名");
    }
</script>
</head>
<body>
    <form id="form1">
        <div>
          用户名：<input type="text" name="loginname" id="loginname" value="" />
          <input type="button" onclick="docolick()" value="保存"/>
        </div>
    </form>
</body>
</html>
Code language: HTML, XML (xml)

Previous: 网页选项卡效果

Posted in jQuery