jQuery.validationEngine插件使用

2019独角兽企业重金招聘Python工程师标准>>>

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 ruleinlineAjax: 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的actionajaxFormValidationURL: 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 itonValidationComplete: false,// Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messagesdoNotShowAllErrosOnSubmit: false,// Object where you store custom messages to override the default error messagescustom_error_messages:{},// true if you want to validate the input fields on blur eventbinded: true,// set to true if you want to validate the input fields on blur only if the field it's not emptynotEmpty: false,// set to true, when the prompt arrow needs to be displayedshowArrow: true,// set to false, determines if the prompt arrow should be displayed when validating// checkboxes and radio buttonsshowArrowOnRadioAndCheckbox: false,// did one of the validation fail ? kept global to stop further ajax validationsisError: false,// Limit how many displayed errors a field can havemaxErrorsPerField: 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 submitajaxValidCache: {},// Auto update prompt position after window resizeautoPositionUpdate: false,InvalidFields: [],onFieldSuccess: false,onFieldFailure: false,onSuccess: false,onFailure: false,validateAttribute:"class",addSuccessCssClassToField:"",addFailureCssClassToField:"",// Auto-hide promptautoHidePrompt: false,// Delay before auto-hideautoHideDelay: 10000,// Fade out duration while hiding the validationsfadeDuration: 0.3,// Use Prettify select libraryprettySelect: false,// Add css class on promptaddPromptClass :"",// Custom ID uses prefixusePrefix:"",// Custom ID uses suffixuseSuffix:"",// Only show one message per error promptshowOneMessage: false}};

转载于:https://my.oschina.net/u/144160/blog/607205

jQuery.validationEngine插件使用相关推荐

JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
jQuery.validationEngine.js学习
项目中使用到了这个插件,抽了个空,看了一下. (function($){ var method ={} $.fn.validationEngine = function(){} $.validatio ...
jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...
jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...
本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元毛血旺 32元套餐:京酱肉 ...
java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...

jQuery.validationEngine插件使用

jQuery.validationEngine插件使用相关推荐

最新文章

热门文章