`
风过无声
  • 浏览: 93064 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery-validation-1.13.1(二)选项配置法

 
阅读更多

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.14.0 官方源代码(2015.09.13)

    《jQuery-validation-1.14.0:前端验证利器详解》 jQuery-validation 是一个广泛使用的JavaScript库,专门用于实现前端表单验证。1.14.0版本在2015年9月13日发布,它提供了强大的功能,帮助开发者轻松地创建具有...

    jquery-validation-1.19.1.zip

    《jQuery验证插件jQuery-validation-1.19.1详解》 jQuery-validation是Web开发中常用的客户端表单验证插件,其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了...

    jquery-validation-1.11.1.zip

    《jQuery验证插件详解——基于jquery-validation-1.11.1.zip的探索》 jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作,事件处理和动画制作等任务。而`jquery-validation`则是jQuery生态中的一款强大...

    jQuery-validation.rar

    此外,为了获取更详细的使用教程和了解更多高级功能,可以访问相关博主的博客或其他在线资源,那里通常会包含详细的配置选项、方法、插件设置以及示例代码,帮助开发者深入理解并充分利用jQuery-validation插件。...

    jquery-validation.zip

    该插件有两个版本出现在压缩包中:`jquery-validation-1.17.0.zip`和`jquery-validation-1.14.0.zip`。这两个版本代表了插件的不同迭代,1.17.0是较新的版本,可能包含更多的优化和新特性,而1.14.0则是一个较旧但...

    jquery-validation-1.13.1全部

    《jQuery Validation插件详解及其1.13.1版本特性》 jQuery Validation插件是用于JavaScript的客户端验证库,它极大地简化了网页表单的验证过程。这个插件以其易于使用、高度可定制化和丰富的功能集而广受欢迎。本文...

    jquery-validation

    jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言

    jquery-validation-1.8.1里面有很多例子

    《jQuery Validation插件详解——基于jquery-validation-1.8.1实例分析》 在Web开发领域,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端处理的压力。jQuery ...

    表单验证JQ插件jquery-validation.js

    表单验证JQ插件jquery-validation.js

    jQuery-Validation-Engine-master

    总结,jQuery Validation Engine是一款强大的表单验证工具,它通过直观的API和灵活的配置选项,使开发者能够轻松创建功能完善的、用户体验优秀的表单验证。通过理解其核心概念、安装步骤和用法,您可以将这一优秀...

    jquery-validation-1.8.0下载

    本篇文章将围绕"jquery-validation-1.8.0"这一版本进行详细介绍,并探讨其核心功能、使用方法以及常见应用场景。 一、jQuery Validation插件概述 jQuery Validation插件是基于jQuery库的一个扩展,它使得在网页中...

    jquery-validation-1.14.0.zip(5.14.1)

    **jQuery Validation 插件详解** jQuery Validation 是一个广泛使用的前端JavaScript库,专为简化HTML表单验证而设计。它提供了一套完整的功能,使开发者能够快速有效地实施表单验证,确保用户输入的数据满足预设的...

    jquery-validation插件

    **jQuery Validation 插件详解** jQuery Validation 插件是一款强大且灵活的JavaScript工具,它专为简化HTML表单验证而设计。这个插件基于广泛使用的jQuery库,使得在网页开发中实现用户输入验证变得轻而易举。其...

    jquery-validation-unobtrusive-master

    6. **无侵入式(Unobtrusive)**:提及的"jquery-validation-unobtrusive-master"可能指的是jQuery Validation的无侵入式版本,它与ASP.NET MVC框架结合使用,通过数据注解实现服务器端和客户端验证的一致性。...

    jquery-validation-1.17.0

    《jQuery Validation插件详解——基于版本1.17.0》 jQuery Validation是Web开发中一个广泛使用的JavaScript库,主要用于表单验证。该插件以其简单易用和强大的功能著称,大大简化了前端数据验证的过程。在本文中,...

    jquery-validation-1.15.0

    总结来说,jQuery Validation Plugin 1.15.0是一个强大的客户端表单验证工具,它简化了验证逻辑,提供了灵活的配置和扩展性,是开发Web应用时不可或缺的辅助工具。通过了解其主要功能、核心文件和使用步骤,开发者...

    jquery1.4.js + jquery-validation.min.js

    二、jQuery Validation Plugin:强大的表单验证工具 jQuery Validation Plugin是jQuery的一个插件,专门用于处理Web表单的验证。它简化了原本繁琐的JavaScript验证代码,提供了一套完整的验证规则和自定义错误消息...

    jquery-validation使用

    **jQuery Validation插件详解** jQuery Validation插件是用于在网页表单验证中提供方便、强大的功能的工具。它简化了对用户输入数据的检查,确保数据的完整性和正确性,从而提高了用户体验。这个插件是基于jQuery库...

    jquery-ui-validation-Engine

    3. **设置验证规则**:通过 `class` 或 `data-validation-engine` 属性为表单元素指定验证规则。例如: ```html [required,custom[email]]" /&gt; ``` 4. **处理提交**:在表单的 `onsubmit` 事件中,使用 `....

    jquery-validation输出漂亮验证信息

    其次,我们可以通过jQuery-validation的选项和方法来定制验证行为。例如,`errorPlacement`函数可以让我们决定错误消息在页面上的位置。我们可能希望将错误信息插入到特定的HTML元素中,或者使用特定的模板来呈现。`...

Global site tag (gtag.js) - Google Analytics