首先下面是一个简单的注册信息表单页面，很简单的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-validate验证框架使用详解.doc》和《jquery.validate.addMethod.doc》，详细解释了框架的使用和自定义方法的创建。同时，提供的`validate.js`和`jquery.validate.zip`文件包含了完整的...
本文将详细介绍jQuery-validate的使用方法和核心知识点，帮助开发者无论新手还是老手都能快速上手。 一、jQuery-validate简介 jQuery-validate是基于jQuery的插件，它的主要任务是对HTML表单进行验证。该插件提供...
根据给定的信息，本文将详细介绍jquery-validate前端验证框架的相关知识点，包括其基本概念、使用方法以及部分具体的验证规则实现。 ### 一、jquery-validate简介 `jquery-validate`是一款基于jQuery的强大表单...
本项目涉及的知识点主要集中在"AmezeUI框架"和"jquery-validate"这两个工具的结合使用上，用于实现一个高效的注册验证系统。 首先，**AmezeUI框架**是一个专为移动互联网设计的前端框架，它提供了丰富的组件和样式...
1. **安装**：要使用jQuery Validate，需先引入jQuery库（如`jquery-1.4.min.js`），然后引入jQuery Validate插件（如`jquery.validate.js`）及对应的本地化文件（如`jquery.validate.messages_cn.js`）以支持中文...
2. **基本使用**：使用`.validate()`方法在表单上初始化验证。例如： ```javascript $('#myForm').validate(); ``` 这将应用验证规则到指定的表单元素。 3. **验证规则**：jQuery Validate提供了多种内置验证...
总的来说，jQuery Validate插件通过`jquery.validate.min.js`和`additional-methods.min.js`提供了丰富的验证功能，`messages_zh.min.js`解决了中文提示的需求，而`readme.txt`则是理解并使用这些文件的重要指南。...
《jQuery Form Validate 1.2：打造高效表单验证》 在Web开发中，表单验证是不可或缺的一环，它确保用户输入的数据符合预设的规则，从而避免无效数据的提交，提高用户体验，同时减轻服务器端的压力。jQuery Form ...
`jQuery Validate` 是一个强大的 JavaScript 库，专为 jQuery 框架设计，用于实现高效、灵活且易于使用的表单验证。它可以帮助开发者创建各种复杂的验证规则，确保用户输入的数据符合预设的要求，从而提高网站的安全...
它与 jQuery 库结合使用，提供了一种简单而强大的方式来实现动态和自定义的表单验证。本项目"FormValidator.zip"包含了一个使用 `jquery-validate` 实现的注册界面表单验证的示例源码。 `jQuery Validate` 插件的...
《jQuery Validate 表单...要在项目中使用 jQuery Validate，首先需要引入 jQuery 库和 jQuery Validate 插件的 JavaScript 文件。通常，这些文件可以从 jQuery 官方网站或 CDN（内容分发网络）获取。例如： ```html ...
jQuery Validate是一个强大的、易于使用的jQuery插件，专为表单验证而设计。本文将深入探讨jQuery Validate的使用方法、核心功能以及常见应用场景，帮助开发者构建出更加健壮的前端表单验证机制。 1. **jQuery ...
二、jQuery Validate基本用法 1. 引入资源：首先，我们需要在HTML文档中引入jQuery库和jQuery Validate插件的JavaScript文件。通常，这些文件可以从CDN（内容分发网络）上获取，或者本地引入。 ```html ...
### jQuery Validate 的基本使用 首先，确保在页面中引入了 `jQuery` 和 `jQuery Validate` 插件的 JavaScript 文件。通常，这可以通过 CDN 或本地文件引用实现： ```html <script src="https://code.jquery....
以上代码展示了如何使用jQuery Validation插件进行基本的表单验证，以及如何设置中文错误消息。 总结来说，jQuery Validation插件1.9.0版本为Web开发者提供了强大的表单验证功能，结合其丰富的验证规则、自定义扩展...
在 `jquery-validate` 的 `doc` 文档中，用户可以找到详细的使用指南，包括如何初始化验证插件，如何定义验证规则，以及如何处理错误消息。文档通常会包含以下内容： 1. **安装与引入**：介绍如何通过 npm 或者直接...
`dist`目录包含了编译后的插件文件，如`jquery.validate.min.js`，这是在实际项目中可以直接使用的压缩和优化过的版本。开发者可以在HTML文件中引入这个文件，轻松启用表单验证功能。 `localization`目录提供了多...
使用jQuery Validate的基本步骤如下： 1. 引入jQuery和jQuery Validate库。 2. 对目标表单元素应用`validate()`方法，并传入配置对象，设置验证规则和错误消息。 3. 在表单元素上添加特定的属性（如`required`、`...