jQuery.validationEngineプラグインの使用

9464 ワード

JavaScript

jQuery.validationEngine pluginは、フォーム要素を検証するためのjavascriptプラグインです.現在、IE 6-8、Chrome、Firefox、Safari、Operaなどのブラウザで良好に機能している.例えば、私たちがよく見ているEmail、phone、URLなどを検証することは、担当するAjax呼び出し検証にもサポートされています.また、ヒント情報は複数の言語をサポートすることもできます.今ではv 2に発展しています.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:ヒント情報

HTML 5属性
属性名
説明
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
	}};

Request取得要求方式、要求リソース、要求パラメータ、要求行および要求ヘッダ

Ajax要求GET/POSTメソッドのパッケージ