前言

在学习jquery.validate.js中的一个小案例，只是这个插件的简单使用。

案例代码如下：

<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.validator.addMethod("phones", function (value, element, param) { //自定义验证
                var exp = new RegExp(param);
                return this.optional(element) || exp.test(value);
            }, "不等于");
            $("#form1").validate({
                rules: {
                    Name: { required: true, maxlength: 6, minlength: 4 }, //给用户框定义规则
                    total: { equalTo: "#Name" },
                    phone: { phones: /^1[3458][0-9]{9}$/ }
                },
                messages: {
                    Name: { required: "必填项", maxlength: "大于6个字符", minlength: "少于4个字符"},//给用户框定义提示语
                    phone:{phones:"不符合规则"}
                },
                errorElement: "em",                   //给用户框自定义提示图片
                success: function (label) {
                    label.text("&nbsp").addClass("success"); //$nbsp:是为了兼容IE的
                }
            });
        });
    </script>
    <%-- 给用户框自定义提示图片 样式--%>
    <style type="text/css">
        em.error
        {
            background: url("images/1.png") no-repeat 0px 0px;
            padding-left:19px;
            color: red;
                 }
       em.success {
            background: url("images/2.png") no-repeat 0px 0px;
            padding-left:19px;
       }
    </style>
</head>
<body>
    <form id="form1">
   用户名：  <input type="text" name="Name" id="Name"/><br />
   7+8=：<input type="text" name="total" id="total"/><br/>
   手机：<input type="text" name="phone" id="phone"/><br/>
   <input type="submit" id="btnSubmit" value="确定"/>
    </form>
</body>

运行结果如下：

结束

我也是知道皮面，如果想再深入学习，推荐一篇博文：http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html

插件—jquery.validate.js的更多相关文章

  1. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  2. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  3. 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  4. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

  5. 验证插件——jquery.validate.js

    下载地址:http://download.csdn.net/download/s592652578/9457421 教程:http://www.runoob.com/jquery/jquery-plu ...

  6. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  7. jquery.validate.js 应用示例

    今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-v ...

  8. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  9. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

随机推荐

  1. SQL server中的parsename详解

    1.SQL server中如何拆分ip地址 比如有一个ip地址是 192.168.0.8 2.再或者,如何拆分一个包装比例,比如1:5:3 用parsename方法即可以实现: select pars ...

  2. Atitit. 最佳实践 QA----降低cpu占有率--cpu占用太高怎么办

    Atitit. 最佳实践 QA----降低cpu占有率--cpu占用太高怎么办 跟个磁盘队列长度雅十,一到李80%走不行兰.... 1. 寻找线程too 多的.关闭... Taskman>> ...

  3. Atitit.软件gui按钮and面板---通讯子系统(区)-- github 的使用....

    Atitit.软件gui按钮and面板---通讯子系统(区)-- github 的使用.... 1. 1.注册账户以及创建仓库 1 2. 二.在GitHub中创建项目(create a new rep ...

  4. PCI-Express协议传输层读书笔记

    http://www.doczj.com/doc/35cb19633169a4517723a3d9-9.html

  5. [vt]xenserver磁盘扩容扩不大问题解决

    xenserver将磁盘扩大后,fdisk可以看到容量大了,但是df -h看到磁盘并没有大,解决. 参考 说明:XenServer里面安装的虚拟机,分区的时候采用的是LVM磁盘分区 需求:现在需要扩容 ...

  6. PKI/CA

    PKI( Public Key Infrastructure )指的是公钥基础设施. CA ( Certificate Authority )指的是认证中心. PKI从技术上解决了网络通信安全的种种障 ...

  7. Linux（Ubuntu/Debian/CentOS/RedHat）下交叉编译boost库

    我用的软件版本如下(其他版本编译方法与此完全相同): Boost Ver: 1.55.0Compiler : GNU gcc 4.6 for ARM 1. 确保ARM编译成功安装,并配置好环境变量.2 ...

  8. 深入浅出Spring（一）Spring概述

    现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...

  9. Unity3D学习（十）：使用VideoPlayer在UI上播放视频

    前言 每一款游戏往往启动的第一次都会播放CG动画之类的,Unity本身对于移动平台也提供了一个接口. Handheld.PlayFullScreenMovie("path") 过场 ...

  10. 知乎日报 API 分析

    声明 下面全部 API 均由 知乎(Zhihu.Inc) 提供,本人採取非正常手段获取. 获取与共享之行为或有侵犯知乎权益的嫌疑.若被告知需停止共享与使用.本人会及时删除此页面与整个项目. 请您暸解相 ...