您的位置首页百科问答

validation 的js是做什么用的

validation 的js是做什么用的

的有关信息介绍如下:

validation 的js是做什么用的

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

username:

password:

url:

only letter:

date:

可以看出使用了jquery.validationEngine plugin之后页面的校验js代码变得更加整洁了。除了上述用法,jquery.validationEngine也可以作用在某个表单元素上$("#form.id").validationEngine();或$("#form.id").validationEngine(action or options);validationEngine的几个基本action:attach:绑定表单验证detach:解除表单验证validate:验证控件或表单 返回ture or falseshowPrompt:在某个元素上创建一个提示,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