jQuery.validationEngine插件使用

時間 2019-11-11

標籤 jquery.validationengine jquery validationengine 插件使用欄目 JQuery 简体版

原文原文鏈接

jQuery.validationEngine plugin是一個旨在校驗表單元素的javascript插件。目前在IE6-八、Chrome、Firefox、Safari、Opera等瀏覽器上表現良好。好比校驗咱們常見的Email、phone、URL等等，對於負責的Ajax調用校驗也提供了支持。並且提示信息也可支持多種語言。如今已經發展到了v2.6.2咱們能夠在github上很輕鬆的獲取到它的源碼。 javascript

一下是本身寫的一個小例子： css

<!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也能夠做用在某個表單元素上 html

$("#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:更新提示層的位置

從 java

$("#"+form).validationEngine('attach',{






}).css({border:"2px solid #000"});

能夠看出validationEngine方法支持鏈式調用。

validationEngine的3中自定義事件 jquery

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屬性 git

屬性名	描述
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默認屬性值 github

// 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

}};