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 }};