1.引入必要的文件,以及语言中文提示包

2.使用规则如下:

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7 number:true 必须输入合法的数字（负数，小数）。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
12 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
13 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10

3.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     em.error {

         background: red;

          /*自定义错误提示图

          background: url('../image/error.png') no-repeat left center;

          */

         }

         em.success {

             background: green;

         }

 </style>

 <script src="/jquery-validation-1.14.0/lib/jquery.js"></script>

 <script src="/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

 <!-- 中文错误提示信息 -->

 <script src="/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

 <body>

 <form class="cmxform" id="commentForm" method="get" action="">

   <fieldset>

     <legend>一个简单的validate验证带验证提示的评论例子</legend>

     <p>

       <label for="cusername">姓名</label>

       <em>*</em><input id="cusername" name="username" size="25" />

     </p>

     <p>

       <label for="cemail">电子邮件</label>

       <em>*</em><input id="cemail" name="email" size="25"  />

     </p>

     <p>

       <label for="curl">网址</label>

       <em>  </em><input id="curl" name="url" size="25" />

     </p>

     <p>

       <label for="comment">你的评论</label>

       <em>*</em><textarea id="comment" name="comment" cols="22" ></textarea>

     </p>

     <p>

       <label for="cvalcode">验证码</label>

       <input id="valcode" name="valcode"  />7+9=?

     </p>

   <p>

       <input class="submit" type="submit" value="提交"/>

     </p>

   <script>

     /*自定义一个验证方法*/

     /*

     formula是需要验证方法的名字 好比如required 必须的。

     value返回的当前input的value值

     param返回的是当前自定义的验证格式 好比如：7+9

     在试用了eval方法 让字符串相加

      */

     $.validator.addMethod("formula",function(value,element,param){

        return value==eval(param)

      },"请正确输入验证信息");

      $("#commentForm").validate({

        rules:{

          username:{

            required:true,

            minlength:2

          },

          email:{

            required:true,

            email:true

          },

          url:"url",

          comment:"required",

          valcode: {

            formula: "7+9"

          }

        },

        /* 自定义错误消息*/

        messages:{

          username:{

            required:"报告,必须输入点东西",

            minlength:"长度不够"

          }

        },

        /*自定义错误提示样式*/

        errorElement:"em",

        success:function(label){

          label.text("成功 ").addClass('success')

        }

      });

   </script>

 </form>

 </body>

 </html>

4.使用 ajax 方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用 data 选项。

remote: {

    url: "check-email.php",     //后台处理程序

    type: "post",               //数据发送方式

    dataType: "json",           //接受数据格式

    data: {                     //要传递的数据

        username: function() {

            return $("#username").val();

        }

    }

}

注意:远程地址只能输出 "true" 或 "false"，不能有其他输出。

jQuery验证插件 Validate详解的更多相关文章

  1. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

  2. verify验证插件的详解

    使用此验证插件,我们只需要新建一个实例对象,同时传入一个json对象就行了,这里我们只传入了两个属性:checkItem和callback.下面的代码解析,我们就按照这个例子来. var verify ...

  3. jquery-validation.js验证插件使用详解

    jquery-validation 使用 一.用前必备 官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: ...

  4. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

  5. jquery验证插件validate自定义扩展

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type ...

  6. jQuery Pagination Ajax分页插件中文详解（摘）

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  7. maven常用插件配置详解

    常用插件配置详解Java代码    <!-- 全局属性配置 --> <properties> <project.build.name>tools</proje ...

  8. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  9. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

随机推荐

  1. ubuntu常见问题及解决

    1.反复关机后自动重启. 联网状态下输入以下命令. sudo apt-get install laptop-mode-tools 2.win和ubuntu双系统下,怎么修改启动顺序和等待时间? 1.开 ...

  2. Android Studio 自定义debug签名文件keystore

    Android Studio 自定义debug签名文件keystore

  3. EF 如何更新少量字段

    EF更新少量字段需要解决两个问题 1.动态的将需要更新的字段提取出来 2.将提取出来的字段设为更新状态 通常更新的时候,都是根据条件将实体取出来,然后赋值字段,最后更新整个实体,所以在方法上看似是更新 ...

  4. Ubuntu上Docker安装Trouble Shooting

    (我的环境是Mint7.1,相当于Ubuntu14.04) 1,首先,根据docker.com上的安装指导来安装docker,这里就不重复了,参考: https://docs.docker.com/i ...

  5. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  6. 纯硬盘安装Kali 无需U盘

    工具: EasyBCD 安装后启动,然后依次点击 添加新条目 >> NeoGrub >> 安装 然后如下图 点击配置,然后弹出一个记事本窗口,先最小化.进行如下操作: 1.拷贝 ...

  7. 把数据输出到Word （组件形式）

    上一篇的文章中我们介绍了在不使用第三方组件的方式,多种数据输出出到 word的方式,最后我们也提到了不使用组件的弊端,就是复杂的word我们要提前设置模板.编码不易控制.循环输出数据更是难以控制.接下 ...

  8. 学习UFT11.5历程(一)

    博主三年来测试都是功能测试 看了虫师的文章,感觉是要学点东西.所以,听从虫师的话,不被眼花瞭乱的测试技术打扰,先学习UFT,再学习python. 再不学习感觉要被淘汰了...... 也不想有谈工资的时 ...

  9. JS刷新父窗口的几种方式<转>

    常用的有:   window.opener.location.reload();    和  window.location.reload(); 浮层内嵌iframe及frame集合窗口,刷新父页面的 ...

  10. jquery.nicescroll完美滚动条使用方法

    配置参数 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是"#000000" cur ...