jqueryvalidatorjs验证框架资源-CSDN下载

共6个文件

js：4个

html：1个

css：1个

jquery

validator

验证框架

文本框验证

5星 · 超过95%的资源需积分: 9 98 浏览量 2009-04-09 15:20:05 上传评论收藏 48KB RAR 举报

**jQuery Validator JS验证框架** jQuery Validator是一个强大的JavaScript库，它为HTML表单提供了方便而灵活的验证功能。这个框架基于jQuery库，使得在网页中实现客户端验证变得简单易行。通过使用jQuery Validator，开发者可以轻松地对用户在文本框、选择框等表单元素中的输入进行有效性检查，从而提升用户体验，减少服务器端的压力。 ### 1. jQuery基础 jQuery是JavaScript的一个轻量级库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在jQuery的基础上构建的Validator插件，继承了其简洁的API和高效的性能，使得开发者能够快速实现复杂的验证逻辑。 ### 2. 验证规则 jQuery Validator提供了一系列预定义的验证规则，例如`required`（必填）、`email`（邮箱格式）、`number`（数字）等。同时，正如描述中提到的，你可以自定义特殊验证规则以满足特定需求。例如，你可以创建一个`customDate`规则，检查输入日期是否符合特定格式或有效日期范围。 ### 3. 错误消息该框架允许自定义错误消息，这样可以根据用户输入的错误类型显示不同提示。你可以为每个验证规则设置不同的错误信息，或者使用通用的错误消息模板。 ### 4. 集成与配置 jQuery Validator可以通过简单的配置选项集成到你的项目中。这些选项包括基本的设置，如`ignore`（忽略某些元素的验证），`errorElement`（定义错误消息的HTML元素），以及`highlight`和`unhighlight`（高亮和取消高亮错误字段）。 ### 5. 提交处理框架提供了`submitHandler`回调函数，当表单验证通过后会触发这个函数。你可以在此函数中添加处理表单提交的逻辑，比如发起Ajax请求将数据发送到服务器。 ### 6. 表单元素的分组如果你需要对一组相关的表单元素进行集体验证，jQuery Validator提供了`groups`选项，允许你将多个验证规则合并为一个。 ### 7. 自定义验证方法除了预定义的验证规则，开发者还可以添加自己的验证方法。这通常涉及到注册新的方法并指定验证规则和对应的错误消息。 ### 8. 使用示例以下是一个简单的使用示例，展示了如何应用jQuery Validator对一个包含必填项的表单进行验证： ```javascript $(document).ready(function() { $('#myForm').validate({ rules: { username: { required: true, minlength: 5 }, password: { required: true, minlength: 8 } }, messages: { username: { required: "请输入用户名", minlength: "用户名至少5个字符" }, password: { required: "请输入密码", minlength: "密码至少8个字符" } }, submitHandler: function(form) { // 表单验证通过后的处理逻辑 form.submit(); } }); }); ``` ### 9. 结合其他jQuery插件 jQuery Validator可以与其他jQuery插件（如Bootstrap或jQuery UI）完美结合，以提供更丰富的用户体验，例如显示更美观的错误提示或交互效果。 ### 10. 维护与更新由于jQuery Validator是一个活跃的开源项目，开发者应保持关注最新的版本和更新，以获取性能优化和新功能。同时，社区提供的文档和示例代码也是学习和解决问题的重要资源。 jQuery Validator是一个功能强大且灵活的验证框架，通过其丰富的验证规则和自定义选项，可以有效地管理网页表单的验证流程，提高用户体验。无论是在简单的个人项目还是复杂的商业应用中，它都是一个值得信赖的工具。

资源推荐

资源详情

资源评论

收起资源包目录

jsvalidator.rar （6个子文件）

jsvalidator

jquery.validate-1.3.2.js 36KB

jquery-1.3.2.js 122KB

corporationInput.html 6KB

main.css 6KB

corporationInput.js 4KB

jquery.validate.person.js 3KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>企业信息</title> <link href="main.css" rel="stylesheet" type="text/css" media="all"/> <script src="jquery-1.3.2.js" type="text/javascript"></script> </script> <script src="jquery.validate-1.3.2.js" type="text/javascript"></script> <script src="jquery.validate.person.js"></script> <script type="text/javascript" src="corporationInput.js"></script> </head> <body> <div id="main"> <form id="commentForm" method="post" action="#"> <div class="title"> <h4> 企业信息管理 </h4> </div> <div class="area-warp"> <div class="area-content"> <div class="area-top"></div> <div id="editArea" class="com-info"> <span style="color: red; "></span> <ul> <li> <dl> <dt> 企业代码 * </dt> <dd> <input type="text" class="f-text" size="24" name="corp_code" id="corp_code" value="" maxlength="10" /> <p class="fc2"> 填写企业代码，为10位数字 </p> </dd> </dl> <dl> <dt> 企业名称 * </dt> <dd> <input type="text" class="f-text" size="24" name="corp_name" id="corp_name" value="" maxlength="256" /> <p class="fc2"> 填写完整企业名称 </p> </dd> </dl> <dl> <dt> 简        称 * </dt> <dd> <input type="text" class="f-text" size="24" name="short_name" id="short_name" value="" maxlength="8" /> <p class="fc2"> 填写企业简称，长度应为4-8个汉字 </p> </dd> </dl> <dl> <dt> 法人代表 * </dt> <dd> <input type="text" class="f-text" size="24" name="legal_representative" id="legal_representative" value="" maxlength="6" /> </dd> </dl> </li> <li> <dl> <dt> 银行账号 * </dt> <dd> <input type="text" class="f-text" size="24" name="bank_accounts" id="bank_accounts" value="" maxlength="16" /> <br/> <br/> </dd> </dl> </li> </ul> <div class="space"></div> <ul> <li> <dl> <dt> 联  系 人 * </dt> <dd> <input type="text" class="f-text" size="24" name="contact" id="contact" value="" maxlength="6" /> </dd> </dl> <dl> <dt> 客户经理 * </dt> <dd> <input type="text" class="f-text" size="24" name="customer_manager" id="customer_manager" value="" maxlength="6" /> </dd> </dl> <dl> <dt> 总        机    </dt> <dd> <input type="text" class="f-text" size="24" name="telephone" id="telephone" value="" maxlength="12"/> </dd> </dl> <dl> <dt> 传        真    </dt> <dd> <input type="text" class="f-text" size="24" name="fax" id="fax" value="" maxlength="12"/> </dd> </dl> <dl> <dt> 邮        编  * </dt> <dd> <input type="text" class="f-text" size="24" name="zip" id="zip" value="" maxlength="6" /> </dd> </dl> </li> <li> <dl> <dt> 联系电话 * </dt> <dd> <input type="text" class="f-text" size="24" name="contact_mp" id="contact_mp" value="" maxlength="11" /> <p class="fc2"> 填写企业联系人手机号码，需为移动手机号码 </p> </dd> </dl> <dl> <dt> 经理电话 * </dt> <dd> <input type="text" class="f-text" size="24" name="manager_phone" id="manager_phone" value="" maxlength="11" /> </dd> </dl> <dl> <dt> 地        址 * </dt> <dd> <textarea name="address" id="address" cols="20" rows="4" class="f-textarea" ></textarea> </dd> </dl> <dl> <dt> <br/> </dt> <dd> * 号项目为必填信息 </dd> </dl> </li> </ul> </div> <p id="btnGroup" align="center"> <input id="submitbtn" type="submit" class="bot2" value="确定"/> </p> <div class="area-bottom"></div> </div> </div> </form> </div> </body> </html>

评论收藏

内容反馈