jQuery.validationEngine插件使用

Zerofishcoding

2014-09-16

jQuery.validationEngine plugin是一个旨在校验表单元素的javascript插件。目前在IE6-8、Chrome、Firefox、Safari、Opera等浏览器上表现良好。比如校验我们常见的Email、phone、URL等等，对于负责的Ajax调用校验也提供了支持。而且提示信息也可支持多种语言。现在已经发展到了v2.6.2我们可以在github上很轻松的获取到它的源码。

一下是自己写的一个小例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery.validationEngine plugin Demo</title>
<link type="text/css" rel="stylesheet"  href="/static/css/jquery.validation/validationEngine.jquery.css"/>
<script type="text/javascript" src="/static/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.validation/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="/static/js/jquery.validation/jquery.validationEngine.js"></script>
<script type="text/javascript">
	$(function(){
		var form = "myForm";
		var condition = [
		     			{name:"username",rule:"validate[required,maxSize[5]]"} ,                
		     			{name:"password",rule:"validate[required] text-input"} ,                
		     			{name:"url",rule:"validate[required,custom[url]]"},           
		     			{name:"letter",rule:"validate[required,custom[onlyLetterNumber]]"},                
		     			{name:"date",rule:"validate[required,custom[date]]"}                
		  ];
		validationInit(condition,form);
		$("#sub").click(function(){
			console.log("validationform="+$("#"+form).validationEngine('validate'));
			 if($("#"+form).validationEngine()){
				return;
			} 
			myForm.submit();
		});
	});
	
	function validationInit(condition,form){
		for(var i = 0; i < condition.length; i++){
			var cond = condition[i];
			$("#"+form+" [name="+cond.name+"]").attr("class",cond.rule);
		}
		$("#"+form).validationEngine('attach',{
			
		}).css({border:"2px solid #000"});
	}
</script>
</head>
<body>
<div style="padding-top: 100px">
	<form action="" id="myForm" name="myForm" method="post">
		username:<input type="text" name="username" id="username"/><br/>
		password:<input type="text" name="password" id="password" data-prompt-position="bottomLeft:20px"/><br/>
		url:<input type="text" id="url" name="url" value="http://"/><br/>
		only letter:<input type="text" id="letter" name="letter" value="too many spaces obviously"/><br/>
		date:<input type="text" id="date" name="date" value=""/><br/>
		<input type="button" value="提交" id="sub"/>
	</form>
</div>
</body>
</html>

可以看出使用了jquery.validationEngine plugin之后页面的校验js代码变得更加整洁了。

除了上述用法，jquery.validationEngine也可以作用在某个表单元素上

$("#form.id").validationEngine();
或
$("#form.id").validationEngine(action or options);

validationEngine的几个基本action:

attach:绑定表单验证
detach:解除表单验证
validate:验证控件或表单返回ture or false
showPrompt:在某个元素上创建一个提示,3中状态‘pass’，‘error’,'load'
hide:隐藏对应元素及元素内的提示信息
hideAll:隐藏页面上的所有提示
updatePromptsPosition:更新提示层的位置

从

$("#"+form).validationEngine('attach',{
			
		}).css({border:"2px solid #000"});

可以看出validationEngine方法支持链式调用。

validationEngine的3中自定义事件

jqv.form.validating:$("#form").bind("jqv.form.validating",function(event){});表单验证时事件
jqv.form.result:$("#form").bind("jqv.form.result",function(event,errorFound){});表单验证完成时事件 errorFound：表单验证不通过(true或false)
jqv.field.result:$("#form").bind("jqv.field.result",function(event,field,isError,promptText){});单个控件验证完成时事件，field 控件对象，isError:控件验证不通过(true或false)promptText: 提示信息

HTML5属性

属性名	描述
data-validation-engine	设置验证规则，除了class验证的另一种选择
data-validation-placeholder	占位符当为必填控件验证时值不能为空也不能为占位符
data-prompt-position	自定义提示信息的位置，可设置为："topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline"可设置更具体的位置，格式为："方向:X偏移值,Y偏移值"。如：data-prompt-position="bottomLeft:20,5"PS：偏移值可以为负数
data-prompt-target	载入提示信息的容器，值为元素的id 仅在promptPosition或data-prompt-position设置为”inline“时有效

jquery.validationEngine默认属性值

// LEAK GLOBAL OPTIONS
	$.validationEngine= {fieldIdCounter: 0,defaults:{

		// 触发控件校验的事件名称
		validationEventTrigger: "blur",
		// 自动滚动视窗到第一个错误位置
		scroll: true,
		// 为第一个input框聚焦
		focusFirstField:true,
		// 是否提示信息
		showPrompts: true,
		// 是否验证不可见元素(如type="hidden"的输入框)
		validateNonVisibleFields: false,
		// 用特殊class属性值 来忽略校验控件
		ignoreFieldsWithClass: 'ignoreMe',
		// Opening box position, possible locations are: topLeft,
		// topRight, bottomLeft, centerRight, bottomRight, inline
		// inline gets inserted after the validated field or into an element specified in data-prompt-target
                //提示信息的位置设定
		promptPosition: "topRight",
		bindMethod:"bind",
		// internal, automatically set to true when it parse a _ajax rule
		inlineAjax: false,
		// if set to true, the form data is sent asynchronously via ajax to the form.action url (get)
                //是否使用Ajax提交表单 默认是get方式
		ajaxFormValidation: false,
		// The url to send the submit ajax validation (default to action)              //设置Ajax提交的url 默认为form的action
		ajaxFormValidationURL: false,
		// HTTP method used for ajax validation
                //设置Ajax表单提交时使用的数据传输方式
		ajaxFormValidationMethod: 'get',
		// Ajax form validation callback method: boolean onComplete(form, status, errors, options)
		// retuns false if the form.submit event needs to be canceled.
               //表单提交，Ajax验证完成后的行为
		onAjaxFormComplete: $.noop,
		// called right before the ajax call, may return false to cancel               //表单提交验证通过后 Ajax提交之前的回调函数
		onBeforeAjaxFormValidation: $.noop,
		// Stops form from submitting and execute function assiciated with it
		onValidationComplete: false,

		// Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messages
		doNotShowAllErrosOnSubmit: false,
		// Object where you store custom messages to override the default error messages
		custom_error_messages:{},
		// true if you want to validate the input fields on blur event
		binded: true,
		// set to true if you want to validate the input fields on blur only if the field it's not empty
		notEmpty: false,
		// set to true, when the prompt arrow needs to be displayed
		showArrow: true,
		// set to false, determines if the prompt arrow should be displayed when validating
		// checkboxes and radio buttons
		showArrowOnRadioAndCheckbox: false,
		// did one of the validation fail ? kept global to stop further ajax validations
		isError: false,
		// Limit how many displayed errors a field can have
		maxErrorsPerField: false,

		// Caches field validation status, typically only bad status are created.
		// the array is used during ajax form validation to detect issues early and prevent an expensive submit
		ajaxValidCache: {},
		// Auto update prompt position after window resize
		autoPositionUpdate: false,

		InvalidFields: [],
		onFieldSuccess: false,
		onFieldFailure: false,
		onSuccess: false,
		onFailure: false,
		validateAttribute: "class",
		addSuccessCssClassToField: "",
		addFailureCssClassToField: "",

		// Auto-hide prompt
		autoHidePrompt: false,
		// Delay before auto-hide
		autoHideDelay: 10000,
		// Fade out duration while hiding the validations
		fadeDuration: 0.3,
	 // Use Prettify select library
	 prettySelect: false,
	 // Add css class on prompt
	 addPromptClass : "",
	 // Custom ID uses prefix
	 usePrefix: "",
	 // Custom ID uses suffix
	 useSuffix: "",
	 // Only show one message per error prompt
	 showOneMessage: false
	}};

javascript 脚本