首先需要引入jQuery.js和jquery.validate.js

以下面代码为例:

<form id="mainform">

<fieldset>

<legend>用户登录</legend></fieldset>

<p><label for="username">用户名</label><input name="username" type="text"/></p>

<p><label for="password">密码</label><input name="password" id="password" type="password"/></p>

<p><label for="confirm-password">密码</label><input name="confirm-password" type="password"/></p>

<p><button type="submit"></button></p>

</form>

<script>

$("#mainform").validate({

  debug:true,

  rules:{

    username:{

      required:true,

      minlength:2,

      maxlength:10

    },

    password:{

      ...

     },

    "confirm-password":{//注意由于名字里有-,所以需要“”

      equalTo:"#password"

     },

    messages:{

      username:{

        required:"必填",

        minlength:“密码最小为。。”,

        maxlength:“。。。”,

        //remote:validate.json//远程验证该用户名是否存在

      },

      password:{

        ...

       }

    }

  }

});

</script>

还有一个debug属性,主要用于调试:当debug:true时,表单点击按钮时不会提交,可以帮助调试。

好了,下面说说validate的基本验证方法:required,remote(远程校验),minlength,maxlength,rangelength(长度范围),min,max,range(值范围)

email,url,date,dateISO(ISO日期),number(数字),digits(非负整数),equalTo(与另一个元素值相等)

remote的使用如上述注释代码,默认采用get方式,当然,还可以自己配置:

remote{

  url:"remote.json",//还可以html,aspx等

  type:'post',

  data:{

    logintime:function(0{

      return +new Date();

    }

  }

}

email:true

ISOdate指标准日期 yyyy-mm-dd

equalTo可以用确认密码来理解,如上述代码

jquery validation插件使用的更多相关文章

  1. jquery validation插件

    jQuery Validate验证框架详解 jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导 ...

  2. Jquery Validation 插件验证手机号

    自定义手机号验证代码  http://www.2cto.com/kf/201505/402781.html // 手机号码验证 jQuery.validator.addMethod("isM ...

  3. 解决 jQuery validation插件 valid()方法总是返回true的问题

    在表单元素验证方法中加入了 remote 方法,调试一直返回true,后来才知道因为是异步验证,所以才会出现此问题,解决方法就是在 remote 方法中,禁用 异步和缓存,具体代码如下 : ..... ...

  4. 转载 jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...

  5. jQuery validation

    之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...

  6. 清空jQuery validation 显示的错误信息

    现在做个BS结构的查询系统,登陆的时候添加个重置的按钮. 他的功能主要是: 1.清空Input的text 2.jQuery validation插件当错误的时候显示的信息,解决方法如下面的代码 var ...

  7. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  8. (转)jQuery Validation Plugin客户端表单证验插件

    jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...

  9. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

随机推荐

  1. Couchbase 上手nosql for .net

    由于项目需要,准备上手nosql数据库,比对了一番之后终于决定使用 couchbase.好了开始吧: 安装 地址:http://www.couchbase.com/get-started-develo ...

  2. Android应用开发学习笔记之多线程与Handler消息处理机制

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 和JAVA一样,Android下我们可以通过创建一个Thread对象实现多线程.Thread类有多个构造函数,一般通 ...

  3. 【HDOJ】2150 Pipe

    计算几何的基础题目.是时候刷刷计算几何了. /* 2150 */ #include <cstdio> #include <cstring> #include <cstdl ...

  4. 【转】Android理解:显式和隐式Intent---- try catch

    原文网址:http://blog.csdn.net/xiao__gui/article/details/11392987 Intent是Android初学者比较难理解的一个东西.我这里以通俗易懂的语言 ...

  5. apt-mirror

    对于centos来说,搭建一个本地源,相对来说,还是比较简单的.对于ubuntu来说,就复杂很多, 估计也和我不熟悉有关. http://unixrob.blogspot.com/2012/05/cr ...

  6. mysql oracle静默 一键安装脚本

    pre-read; 为了达到一键搞定的目的!现Ruiy简单做如下几小条规定   如果你想这么一键来搞定请君莫要违背约束! 1. 下载 `二进制` mysql软件介质版本不限,二进制包务必,源码及rpm ...

  7. Windows 如何在cmd命令行中查看、修改、删除与添加环境变量

    转自:http://www.cnblogs.com/saptechnique/archive/2013/02/17/2914222.html 首先明确一点: 所有的在cmd命令行下对环境变量的修改只对 ...

  8. 关于C#泛型列表List<T>的基本用法总结

    //示例代码如下:using System;using System.Collections.Generic;using System.Collections.ObjectModel;namespac ...

  9. windows 编程 —— 子窗口 与 子窗口控件

    目录: 子窗口与主窗口的交互 子窗口控件 按钮类别 button 滚动条类别 scrollbar 静态类别  static 编辑框类别 edit 清单方块 listbox 子窗口与主窗口的交互 创建窗 ...

  10. NetworkX学习笔记-5-NetworkX中怎样对多个网络赋属性,并根据属性排序

    这是我在数据分析过程中遇到的实际问题,简单记录一下.这里以DiGraph为例,其他类型的网络(图)的处理方法是一样的. 按照这里:http://networkx.github.io/documenta ...