前言

在学习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. 【Android UI设计与开发】使用ViewPager实现欢迎引导页面

    一.实现的效果图 每次看别人的代码前,必需要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似.有图才有真相嘛,同一时候,最下方有源代码的下载地址,差点儿源代码的每一行都有凝视,写 ...

  2. 使用while循环和伪列的存储过程

    使用while循环和伪列的存储过程如下: USE [JointFrame2] GO /****** Object: StoredProcedure [dbo].[Proc_enterprise_uni ...

  3. unity, SkinnedMeshRenderer.bones[i]不能直接赋值

    SkinnedMeshRenderer.bones[i]=xxx,这样写不报错,但也不起作用. 正确的方法是: List<Transform> boneList=new List<T ...

  4. vim插件管理利器

    一.pathogen简介 通常情况下安装vim插件,通常是将所有的插件和相关的doc文件都安装在中一文件夹中,如将插件全部安装在/usr/share/vim/vim73/plugin/目录下,将帮助文 ...

  5. 计算机图形学（一） 视频显示设备_1_CRT原理

    第 1 章 图形系统概述        如今.计算机图形学的作用与应用已经得到了广泛承认.大量的图形硬件和软件系统已经应用 到了差点儿全部的领域.通用计算机甚至很多手持计算器也已经普遍具备 二维及三维 ...

  6. 电影大全 API接口

    http://www.apix.cn/services/show/29 http://www.apix.cn/services/show/112

  7. boost 库的安装

    一.windows下 环境:win7 64位 方法1:使用.exe类型的boost进行安装,也就是编译过得,这种方法最简单.下载后直接执行.exe就行了. http://sourceforge.net ...

  8. jquery flexslider 轮播插件

    去官网下载最新的 https://www.woothemes.com/flexslider/ 引入 css 和 js api $(window).load(function() { $('.flexs ...

  9. 针对16v554(ttyS0-15)的ttyAT0的ｌｏｇｉｎ配置

    1 ## /etc/inittab# console::sysinit:/etc/init.d/rcSconsole::respawn:/sbin/getty -L 115200 ttyAT0 vt1 ...

  10. ipipe-3.10

    git://git.xenomai.org/ipipe-gch.git for-ipipe-3.10