1.options-validate.html
<html> <head> <meta charset="UTF-8" /> <script src="jquery-1.6.4.js" type="text/javascript"></script> <script src="jquery.validate.min.js" type="text/javascript"></script> <style> .warning { color: red; } .success { color: green; } .valid { color: green; } </style> <script language="javascript"> <!-- $(function(){ $("#validate").validate({ //如果为true,表单不会提交,而且会在控制台显示一些错误消息(需要Firebug或者Firebug lite) //debug: true, //当表单通过验证,不提交表单,而是调用这个回调函数 submitHandler: function(form) { $("#msg").html("提交表单"); //不能使用$(form).submit();这个方法会触发另一次validatation,会使程序陷入死循环 form.submit(); }, //当未通过验证的表单提交时,调用这个回调函数 invalidHandler: function(event, validator) { $("#msg").html("共有" + validator.numberOfInvalids() + "个组件验证错误"); }, //使用了jQuery.not()过滤指定选择器的组件,不进行校验 //类型为submit和reset的组件总是被忽略的,还有disabled的组件 //ignore: ".ignore", //用户定义的键/值对规则。 //键为一个组件元素的 name属性(或是一组单选/复选按钮)。 //值为一个简单的字符串或者由规则/参数对(rule/parameter)组成的一个对象。 //可以和 class/attribute/metadata 规则一起使用。每个规则可以指定一个依存的验证前提条件。 rules: { name: { required: true, rangelength: [8, 20] }, password: { required: true, rangelength: [8, 20] }, passwordConfirm: { required: true, rangelength: [8, 20], equalTo: { param: "#password", depends: function(element) { return $("#password").val().length >= 8; } } }, firstName: "required", lastName: "required" }, //用户自定义的 键/值 对消息。 //键为一个组件元素的name属性,值为该组件元素将要显示的消息。 //该消息覆盖元素的title属性或者默认消息。 //消息可以是一个字符串或者一个回调函数。回调函数必须在验证器的作用域中调用,将规则参数作为回调函数的第一个参数, //将该组件元素作为回调函数的第二个参数,且必须返回一个字符串类型的 消息。 messages: { name: { required: "用户名不能为空", rangelength: function(params, element) { return "用户名长度必须在" + params[0] + "和" + params[1] + "之间"; } }, userName: "请输入用户姓名" }, //指定错误消息分组。 //一个组由一个任意的组名作为键,一个由空白符分割的组件元素name属性列表作为值。 //用errorPlacement定义组消息的存放位置。 groups: { userName: "firstName lastName" }, //自定义错误标签的显示位置。 //第一个参数:一个作为jQuery对象的错误标签,第二个参数为:一个作为jQuery对象的未通过验证的表单元素。 errorPlacement: function(error, element) { if (element.attr("name") == "firstName" || element.attr("name") == "lastName" ) { error.insertAfter("#lastName"); } else { error.insertAfter(element); } }, //提交时验证组件。当设置为false时,只能用其它的事件验证。也可以设置为一回调方法。 //onsubmit: false //焦点离开时验证(单选/复选按钮除外)。 //如果组件中没有输入任何内容,所有的规则将被跳过,除非该组件已经被标记为无效的。 //也可以设置为一回调方法,方法有两个参数element和event //onfocusout: false, //当键盘按键弹起时验证。 //只要组件元素没有被标记成无效的,不会有反应。否则,所有的规则将在每次按键弹起时验证。 //也可以设置为一回调方法,方法有两个参数element和event onkeyup: false, //当鼠标点击验证单选和复选按钮。 //也可以设置为一回调方法,方法有两个参数element和event //onclick: false //使用validator.focusInvalid()将焦点设置在最后一个有焦点的组件或者第一个验证不通过的组件 focusInvalid: false, //如果为true,当组件得到焦点时,移除在该组件上的errorClass并隐藏所有错误消息。 //避免与focusInvalid一起使用。 -- 与focusInvalid一起使用效果更好 focusCleanup: true, //错误消息和错误组件的样式 errorClass: "warning", //组件验证通过时的样式 //validClass: "success", //放置错误消息的元素类型,默认为label,使用for属性和对应的组件产生关联 //errorElement: "p", //用一个指定的元素将错误消息元素包围。 //与errorLabelContainer一起创建一个错误消息列表非常有用。 wrapper: "li", //错误消息元素的容器,用于将错误消息集中起来显示 //errorLabelContainer: "#error", //试不出效果 //errorContainer: "#errorContainer", //自定义消息显示的句柄。 //该回调函数有两个参数,第一个为errorMap,第二个参数为errorList,在validator对象的上下文中调用。 //参数只包含那些经过onblur/onkeyup验证的表单元素,也有可能是单个元素。 //除此之外,你还可以用this.defaultShowErrors()触发默认的行为。 /* showErrors: function(errorMap, errorList) { $("#summary").html("共有" + this.numberOfInvalids() + "个组件验证错误"); this.defaultShowErrors(); } */ //如果指定它,当验证通过时显示一个消息。 //如果是String类型的,则添加该样式到标签中,如果是一个回调函数,则参数为标签(JQuery对象)和对应的组件(DOM对象) /* success: function(label, input) { label.addClass("valid").text($(input).val() + " is Ok!"); } */ //如何高亮显示错误组件 //默认为添加errorClass //三个参数,第一个错误组件(DOM对象),第二个errorClass,第三个validClass /* highlight: function(input, errorClass, validClass) { $(input).removeClass(validClass).addClass(errorClass); } */ //和highlight操作相反,参数一致 /* unhighlight: function(input, errorClass, validClass) { $(input).removeClass(errorClass).addClass(validClass); } */ //设置它用来跳过错误消息对title属性的引用,避免Google工具栏引起的冲突。 //ignoreTitle: true }); }); function isFormValid() { alert($("#validate").valid()); } function showFormRules() { alert($("#name").rules()); } --> </script> </head> <body> <p id="msg"></p> <div id="errorContainer"></div> <div id="error"></div> <form id="validate"> <p> NAME(Required,8-20): <input type="text" id="name" name="name" /> </p> <p> PASSWORD(Required,8-20): <input type="text" id="password" name="password" title="请输入密码,长度为8-20"/> </p> <p> PASSWORD-CONFIRM(Required,8-20,equalTo:#password): <input type="text" id="passwordConfirm" name="passwordConfirm" /> </p> <p> FIRST NAME(Required): <input type="text" id="firstName" name="firstName"/> LAST NAME(Required): <input type="text" id="lastName" name="lastName"/> </p> <p> ZipCode(Required): <input type="text" id="zipCode" name="zipCode" /> </p> <p> <input type="submit" value="提交"/> <input type="button" value="查看表单是否验证通过" onclick="isFormValid();"/> <input type="button" value="查看表单Name组件的校验规则" onclick="showFormRules();"/> </p> </form> <div id="summary"></div> </body> </html>
2.参考资料
http://jqueryvalidation.org/documentation/
相关推荐
jquery-validation-1.13.1
jquery-validation-1.8.0.rar jquery-validation-1.8.0.rar
jquery-validation.校验框架,没有积分的同学可以在我的博客下留言获取。
jquery-validation-1.15.0
jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言
jQuery-Validation-Engine-master非常好的jquery验证表单控件
jQuery-validation 1.14.0 官方版(2015.09.13--源代码+示例) 输入格式判别,条件输入识别,验证通过
jquery-validation-1.8.1里面有很多例子
表单验证JQ插件jquery-validation.js
jquery-validation是基于jQuery的一款表单验证的插件,独特的验证样式非常新颖
jquery-validation-1.19.1的jq验证代码压缩包,便捷开发web中jq的文本框文本验证代码,上传新版本,供大家下载
jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip
jquery1.4.js jquery-validation.min.js 里面包括这两给个js包 都是最小版的
jQuery:表单校验插件validation,免费下载。方便大家学习!详细教程请前往我的博客进行查看。 一起交流学习。
jquery-validation-1.9.0,内有详细示例demo
jQuery-Validation1.17.0官方最新版本(截止2018.8)
jQuery-Validation例,jQuery-Validation例子,子jQuery-Validation例子,asp.net页面制作,可运行。
前端表单验证插件 基于jQuery
jquery validation jquery ui validation Engine验证插件