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. 表单 阻止 技巧 JavaScript js

    阻止表单的提交,可以用return false 来进行阻止 长度不低于6,不高于20 if(username.length < 6 || username>20){ alert (&quo ...

  2. 个人作业-Week2 案例分析

    微软必应词典客户端的案例分析 第一部分 调研,评测 1)bug: 运行平台:iOS 10.0.2 必应词典版本:4.2.2 1. bug标题:词库加载错误 bug详细描述:学习界面中的经典词库出国考试 ...

  3. 【前端】Node.js学习笔记

    module.exports 使用方式: // File Name: hello.js function greet() {/*......*/} // 有下面这两种写法: // 1. module. ...

  4. Java 打印堆栈的几种方法 Exception

    Exception e = new Exception("this is a log"); e.printStackTrace(); //延迟才可以看出效果 Thread.curr ...

  5. Gbase数据库备份与还原

    备份命令:cd D:\GeneralData\GBase\Server\bin        回车 后 : d :        回车 后: dump.exe -usysdba(u+用户名) -pbj ...

  6. Scrum Meeting 11-20151217

    任务安排 姓名 今日任务 明日任务 困难 董元财 网络连接框架优化 请假(数据库) 无 胡亚坤 优化商品搜索界面 请假(数据库) 无 刘猛 请假(参加编译测试) 无 马汉虎 请假(参加编译测试) 无 ...

  7. 常用SVN命令

    SVN命令 svn co  svn://10.144.156.41/branches/webroot_2015_03_03_gift 表示check远程目录到当前目录下,co命令只能check目录,如 ...

  8. 本周psp（观众页面）

    个人项目PSP(观众页面) 计划 30min 估计要用多长时间 3d 开发 5h 需求分析 1h 生成设计文档 1h 设计复审 50min 代码规范 20min 具体设计 40min 具体编码 3h ...

  9. android持久化技术

    Android系统提供了3种持久化技术,所谓持久化技术是指将内存中的书籍保存在存储设备中. 1.文件存储 2.sharedPreference存储 3.数据库存储 除此之外,还可以将数据保存在SD卡中

  10. centos 更新linux内核

    之前一直使用centos 7系统进行开发,centos 7.0 系统自带的linux内核版本为 linx 3.10,最近开发需要使用到socket的reuse port特性,该特性在linux 3.9 ...