首先下面是一个简单的注册信息表单页面，很简单的HTML代码，也是我们需要录入元素的地方：
<form action="#" method="post" id="regist">
<table cellpadding="0" cellspacing="0" border="0" class="form_table">
<tr>
<td valign="middle" align="right">用户名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="username" id="username" /> </td>
</tr>
<tr>
<td valign="middle" align="right">真实姓名:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="name" /> </td>
</tr>
<tr>
<td valign="middle" align="right">密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="pwd" id="pwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">重复密码:</td>
<td valign="middle" align="left"> <input type="password" class="inputgri" name="repwd"/> </td>
</tr>
<tr>
<td valign="middle" align="right">年龄:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="age" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电话:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="phone" /> </td>
</tr>
<tr>
<td valign="middle" align="right">电子邮件:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="email" /> </td>
</tr>
<tr>
<td valign="middle" align="right">验证码:</td>
<td valign="middle" align="left"> <input type="text" class="inputgri" name="number" /> </td>
</tr>
</table>
<p> <input type="submit" class="button" value="Submit »" /> <input type ="reset" class = "button" value = "Reset »"> </p>
</form>
接下来我们要对填写的表单进行校验，既然是用了JQuery.Validate来校验我们的表单，那么我们肯定要在HTML的头部引入JQuery和JQuery.Validate的JS库，因为下面的语句会调用函数库：
<head>
<title>欢迎注册</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.validate.messages_cn.js"></script>
</head>
接着我们就在head里面添加我们的校验代码，因为使用了插件，所以校验的方式很简单，每个表单几行代码就可以搞定了：
<script type="text/javascript">
//表单填写情况校验
$(function(){ //代表页面加载以后执行
$("#regist").validate( //此处的#regist是JQuery的选择器，代表了校验id为regist的Form
{
rules: {//此处开始配置校验规则，下面会列出所有的校验规则
username : "required",
name : "required",
pwd : {required:true,rangelength:[6,10]},
repwd : {required:true,equalTo:"#pwd"}, //需要和id=pwd元素对应
age : {required:true,rangelength:[1,2]},
phone:{required:true,rangelength:[5,20]},
number:{required:true,},
email: {required:true,email: true,},
},
messages:{//自定义提示信息
name:{required:"真实姓名不能为空!"},
pwd:{required:"密码不能为空!",rangelength:"密码必须在6-10位!"},
email:{required:"电子邮箱不能为空!"},
}
}
);
});
</script>
完成了代码以后，我们可以打开页面测试校验结果，全部都没有录入，Email字段录入错误的格式，效果如下：
JQuery.Validate支持的校验规则有下面这些：
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
因为这个插件是外国人编写的，所以默认的提示信息是中文的，但是我们可以自定义他的提示语言，比如我就在head里面引入了jquery.validate.messages_cn.js文件，里面是我自定义的汉化版提示，如果某些特殊的需要单独提示的，可以直接在校验代码中以message:{}的形式定义，见上面标亮代码部分
这个插件使用其实是很方便便捷的，而且容易上手，在一些不复杂的系统都可以运用上去，本文写得比较粗糙，JQuery.Validate的功能远远不止我所描述的，感兴趣的同学百度，Google去了解下即可，下次提供一个手写的JQuery校验，功能和这个差不多，不过更加灵活了一些。
分享到：
相关推荐
编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程，基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件，并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。
Jquery.validate插件使用方法，基本上能满足注册所用到的表单验证
资源名称：jquery_validate_js的基本用法入门 中文WORD版内容简介：本文档是jquery.validate.js的基本用法入门；jquery.validate.js是jquery下的一个验证插件，功能比较强大。感兴趣的朋友可以过来看看资源截图： ...
包含 jquery-2.js、jquery-1.10.2.js、jquery-1.9.1.min.js、jquery-1.8.3.js、jquery-1.5.2.min.js、jquery.validate.js...............
主要分几部分 jquery.validate 基本用法 jquery.validate API说明 jquery.validate 自定义 jquery.validate 常见类型的验证代码 下载地址 jquery.validate插件的文档地址 ...
从那里，只需调用validate()以查看是否一切正常！ 支持的验证 有关可用验证规则的列表，请查看。 目前有一些规则不受支持。 不支持的规则包括active_url ， array ， exists ， image ， mimes ， timezone ， ...
本文实例为大家分享了jquery.validate表单验证的使用方法，供大家参考，具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前，首先将表单验证的效果展示给大家。 1.点击表单项，显示帮助提示 2.鼠标离开表...
这里总结了jquery_validate控件的基本用法、自定义验证方法及验证成功后的逻辑，自认为已经够用了，希望和大家分享一下
jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件： 一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度...
现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。... ...就比如表单校验，里面涵盖的...3.一些方便的验证库，比如jQuery.validate 正因为如此普遍的需求和一定的复杂性
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括...
JQuery.validate.js 在表单验证中经常使用，初学，对于其中Remote的使用说明一下. . 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法，JQuery.validate.js是对JQuery的一个插件，可以认为是对...
使用jQuery Validate插件可以使用remote校验规则完成验证。 示例： 一.基本用法 1.需要验证的表单 <form id="registForm"> <input type="text" id="username" name="username"> </form> 2.js ...
下面是文档，请按照它们开始使用Jquery.validateWrapper。先决条件jQuery的。 JQuery验证插件。 Jquery验证程序的其他方法。// required plugins.< script src = ...
这些是您的应用程序的基本要求： Git bower v1.3+ node v0.10+ 注意：JS依赖项（如RequireJS和jQuery）将与bower一起安装。 安装并运行 从github克隆源代码： git clone ...
jquery.validate_ValidationjQuery表单验证框架
为了更好地实现人机交互，使用jQuery封装库中的validate插件，在用户填写表单时，可以快速地对用户填写的数据进行验证，并做出反馈。 二、validate插件简介 validate()是插件的核心方法，定义了基本的校验规则和...
一、 jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和...
使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤选择器 使用jQuery属性过滤选择器 使用jQuery子元素过滤选择器 使用jQuery表单对象属性...