前言

在学习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. pandas contact 之后，若要用到index列，要记得用reset_index去处理index

    # -*- coding: utf-8 -*- import pandas as pd import sys df1 = pd.DataFrame({ 'A': ['A0', 'A1', 'A2', ...

  2. Altera Quartus II下载中途失败

    1.Altera 的quartus II 下载程序时中途失败,有可能是程序写的不对(缺少初始状态,else补全等等) 2.下载程序pof最好也用英文命名,再下载.

  3. [POJ 1236][IOI 1996]Network of Schools

    Description A number of schools are connected to a computer network. Agreements have been developed ...

  4. 82. Single Number【easy】

    Given 2*n + 1 numbers, every numbers occurs twice except one, find it.   Example Given [1,2,2,1,3,4, ...

  5. filter函数和map函数

    filter filter()函数接收一个函数 f 和一个可迭代对象,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter()根据判断结果自动过滤掉不符合条件的元素,返 ...

  6. Linux系统下Shell命令行快捷键实用技巧

    # Ctrl + A# Ctrl + E切到命令行开始|结尾 # esc+f往右跳一个词# esc+b往左跳一个词 # Ctrl + W清除光标之前一个单词# esc + d 删除光标后的一个词 # ...

  7. 椭圆曲线密码体制(ECC)简介

    一.椭圆曲线的基本概念 简单的说椭圆曲线并不是椭圆,之所以称为椭圆曲线是因为他们是用三次方程来表示,并且该方程与计算椭圆周长的方程相似. 对密码学比较有意义的是基于素数域GF(p)和基于二进制域(GF ...

  8. [Busybox]Busybox制作文件系统

    问题: 1.目前busybox和bootstrap两种方案制作文件系统,哪种开发周期更短,更加简单? 2.如果需要在文件系统中添加某个package,要怎么做,如vim/udhcpd等? 转自:htt ...

  9. 我们通过一个服务器程序，以研究backlog参数对listen系统调用的影响，运行截图如下

    启动服务器程序,服务器程序正在等待客户端的连接 我们使用一次telnet命令就建立一个连接 打开多个终端窗口执行下列命名 #telnet 192.168.255.128 4444多次执行 然后我们执行 ...

  10. QListView和QListWidget的区别

    QListView是基于Model,而QListWidget是基于Item.这是它们的本质区别. 往QListView中添加条目需借助QAbstractListModel: 如: MainWindow ...