前言

在学习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. QQ窗体的控制，同步异步打开360网盘，控制360网盘窗体的移动

     1.通过system启动飞秋进程的方式: 2.Windows下杀死进程的方式是:taskkill /f/im QQ.exe.截图例如以下: watermark/2/text/aHR0cDovL2 ...

  2. ItelliJ基于Gradle创建及发布Web项目（三）

    关键字:web 多模块 用惯了eclipse傻瓜式的配置,开始web部署真的不习惯. 一.现象: 项目发布了,死活找不到依赖模块中的类. 二.排查 确定F4->Artifacts->Out ...

  3. springboot web 服务器选择

    Spring Boot 揭秘与实战(五) 服务器篇 - 其他内嵌服务器 拓展链接 http://www.jianshu.com/p/9710585258fb 发表于 2017-01-03 | Spri ...

  4. JUC组件扩展（三）：BlockingQueue（阻塞队列）详解

    一. 前言 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大 ...

  5. atitit.设计文档---操作日志的实现

    atitit.设计文档---操作日志的实现 日志查询 1 ----mybatis  配置... 1 添加日志 1 日志查询 <a class="l-link" href=&q ...

  6. atitit.安全的签名摘要 算法attilax总结

    atitit.安全的签名 算法attilax总结 1. MD5 (不推荐)结果是128位二进制,只有转为16进制字符串是32位 1 2. 使用sha1算法加密后的密串长度有40位,相对更安全一些.Sh ...

  7. ognl概念和原理详解

    一.问题的提出   在mvc中,数据是在各个层次之间进行流转是一个不争的事实.而这种流转,也就会面临一些困境,这些困境,是由于数据在不同世界中的表现形式不同而造成的: 1. 数据在页面上是一个扁平的, ...

  8. python内置函数之__import__()

    __import__(name, globals=None, locals=None, fromlist=(), level=) 用来导入模块. >>> __import__('os ...

  9. linux中mysql安装的问题

    Starting MySQL.Manager of pid-file quit without updating file.[FAILED] 已解决 这是由于系统中/etc/my.cnf文件本身存在或 ...

  10. 解决Access denied for user &#39;&#39;@&#39;localhost&#39; to database &#39;mysql&#39;问题

    在改动mysql的root用户password后,再登陆,提示如标题的错误,找了一番答案之后,最终解决,过程例如以下: 1.停掉mysql:      service mysqld stop 2.使用 ...