jqueryvalidate验证示例资源-CSDN文库

共6个文件

js：4个

html：1个

bak：1个

jquery

validate

验证示例

5星 · 超过95%的资源需积分: 10 186 浏览量 2013-01-22 17:51:53 上传评论收藏 91KB ZIP 举报

`jQuery Validate` 是一个流行的 JavaScript 库，用于在客户端对 HTML 表单进行验证，确保用户输入的数据符合预设的规则。它与 jQuery 框架紧密集成，提供了丰富的验证功能，可以方便地添加到任何使用 jQuery 的项目中。在这个“jquery validate验证示例”压缩包中，很可能包含了 `jQuery Validate` 插件的核心文件以及一些示例代码，帮助开发者快速理解和使用这个插件。 `jQuery Validate` 的核心功能包括： 1. **基本验证**：例如，检查必填字段、电子邮件格式、URL 格式、数字范围等。 2. **自定义验证**：通过编写自定义验证方法，可以针对特定需求扩展验证规则。 3. **错误消息显示**：能够配置错误消息的显示位置和样式，如显示在输入框旁边或底部。 4. **异步验证**：支持通过 AJAX 进行后台验证，例如检查用户名是否已存在。 5. **组验证**：可以对一组相关的输入字段进行联合验证。 6. **动态验证**：根据其他字段的值改变，动态调整某个字段的验证规则。在实际使用 `jQuery Validate` 时，首先需要在页面中引入 jQuery 和 `jQuery Validate` 的库文件。通常，库文件包括 `jquery.js` 和 `jquery.validate.js`。压缩包中的 `jquery validate` 文件可能就是这些库文件，也可能包含了一些示例页面，用于展示如何配置和使用验证规则。例如，一个简单的使用示例会是这样的： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery Validate 示例</title> <script src="jquery.js"></script> <script src="jquery.validate.js"></script> </head> <body> <form id="myForm"> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <br> <label for="password">密码：</label> <input type="password" id="password" name="password" required minlength="6"> <br> <input type="submit" value="提交"> </form> <script> $(document).ready(function() { $("#myForm").validate({ rules: { email: { required: true, email: true }, password: { required: true, minlength: 6 } }, messages: { email: { required: "请输入邮箱地址", email: "请输入有效的邮箱地址" }, password: { required: "请输入密码", minlength: "密码至少需要6位" } } }); }); </script> </body> </html> ``` 在这个例子中，我们创建了一个表单并定义了两个验证规则：邮箱必须存在且为有效格式，密码必须存在且长度至少为6位。当用户尝试提交表单时，如果输入不符合规则，`jQuery Validate` 会阻止表单提交并显示相应的错误消息。此外，还可以通过 `.addMethod()` 添加自定义验证方法，或者通过 `.rules('add')` 在运行时动态添加验证规则。对于更复杂的场景，`jQuery Validate` 提供了诸如 `.valid()` 和 `.invalid()` 等方法，用于在事件处理程序中手动触发验证。总结来说，`jQuery Validate` 是一个强大且灵活的客户端验证工具，可以帮助开发人员构建更加健壮和用户友好的表单。通过深入理解其配置选项和API，我们可以创建出满足各种业务需求的验证逻辑。这个压缩包中的示例和资源无疑是一个很好的学习起点，让开发者快速上手 `jQuery Validate`。

资源推荐

资源详情

资源评论

收起资源包目录

jquery validate.zip （6个子文件）

jquery validate

validate.html 7KB

jquery-1.7.2.js 247KB

validate.html.bak 7KB

jquery-form.js 20KB

jquery.validate.min.js 21KB

message_cn.js 990B

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>validateDemo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script>  <script type="text/javascript" src="message_cn.js"></script>  <script type="text/javascript" src="jquery-form.js"></script> <script type="text/javascript" > $(document).ready(function(){ //通过id查找要进行校验的表单 $("#signupForm").validate({ //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。 //onsubmit:false, //onfocusout:false, //onkeyup:false, //onclick:false, //验证通过后执行的动作 //success:function(label){ // label.text("ok!").addClass("success"); //}, //手动设置错误信息的显示方式 errorPlacement: function(error, element) { error.appendTo(element.parent().next()); // if ( element.is(":radio") ) // error.appendTo( element.siblings("span") ); // else if ( element.is(":checkbox") ){ // error.appendTo ( element.siblings("span") ); // } // else // error.appendTo( element.parent() ); } , rules:{ username:{ required: true, rangelength: [ 5, 7 ] }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, sex: { required: true }, email: { required: true, email: true }, language: { required: true, rangelength:[2,3] }, book: { required: true, rangelength:[2,3] }, agree: "required", upload: { required: true, accept: "flv|jpg" } }, //校验提示信息 messages: { username: { required: "请输入用户名", rangelength: "用户名长度必须为{0}到{1}个字符或汉字" }, password: { required: "请输入密码", minlength: "密码的最小长度是{0}个字符" }, confirm_password: { required: "请输入确认密码", minlength: "确认密码的最小长度是{0}个字符", equalTo: "确认密码与密码不相等" }, email: "请输入正确的邮箱", language: { required: "该项必须填写", rangelength: "请您选择{0}到{1}项语言" }, book: { required: "该项必须选择", rangelength:"请您选择{0}到{1}本书" }, agree: "您没有同意使用协议", upload: { required: "请输入上传文件的路径", accept: "上传文件的格式只能是 flv或jpg" } } }); }) </script>  </head> <body style="font-family:'宋体','Arial Narrow'; font-size:12px; ">  <form class="cmxform" id="signupForm" method="get" action=""> <fieldset > <legend>字段校验、日历控件完整示例</legend> <table> <tr> <td><label for="username">Username</label></td> <td><input id="username" name="username" /></td>  <td></td> </tr> <tr> <td><label for="password">Password</label></td> <td><input id="password" name="password" type="password" /></td> <td></td> </tr> <tr> <td><label for="confirm_password">Confirm password</label></td> <td><input id="confirm_password" name="confirm_password" type="password" /></td> <td></td> </tr> <tr> <td><label for="sex">sex</label></td> <td><pre><input id="sex1" name="sex" type="radio" />男 <input id="sex2" name="sex" type="radio" />女</pre></td> <td></td> </tr> <tr> <td><label for="email">Email</label></td> <td><input id="email" name="email" /></td> <td></td> </tr> <tr> <td><label for="upload">Upload</label></td> <td><input type="file" name="upload" /></td> <td></td> </tr> <tr> <td><label for="language">language</label></td> <td><input type="checkbox" name="language" value="cn" />汉语 <input type="checkbox" name="language" value="en" />英语 <input type="checkbox" name="language" value="jp" />日语 <input type="checkbox" name="language" value="ge" />德语 </td> <td></td> </tr> <tr> <td><label for="book">book</label></td> <td><select name="book" multiple="multiple" > <option value="en">英语书</option> <option value="cn">汉语书</option> <option value="jp">日语书</option> <option value="ge">德语书</option> </select></td> <td></td> </tr> <tr> <td><label for="agree">同意该协议</label></td> <td><input type="checkbox" class="checkbox" id="agree" name="agree" /> </td> <td></td> </tr> <tr> <td><input class="submit" type="submit" value="Submit" /></td> </tr> </table> </fieldset> </form>  </body> </html>

评论收藏

内容反馈