validationengine，validation 的js是做什么用的

编程之家2023-11-04141次浏览

大家好，今天小编来为大家解答validationengine这个问题，validation 的js是做什么用的很多人还不知道，现在让我们一起来看看吧！

validation 的js是做什么用的

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

一下是自己写的一个小例子：

<!DOCTYPE html>

<html>

<head>

<title>jQuery.validationEngine plugin Demo</title>

$(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>

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

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

javascript jsp 表单验证 float int

int类型要求输入的全是数字就行

float类型也就是要求输入的有且只有一个.就其他都是数字就行。

用正则表达式。给你一个例子，把下面代码保存到html文件，用IE打开运行。（如果提示禁止了script要右键点击选择“允许运行script”）

<html>

<head>

function testint()

{

var reg=new RegExp("\\d+");

var value=document.forms[0].int.value;

if(reg.test(value))

alert("是int类型");

else

alert("不是int类型")

}

function testfloat()

{

var reg=new RegExp("\\d+\\.\\d+");

var value=document.forms[0].float.value;

if(reg.test(value))

alert("是float类型");

else

alert("不是float类型")

}

</script>

</head>

<body>

请输入int型：<input type="text" name="int">

<br>

请输入float型：<input type="text" name="float">

</form>

</body>

</html>

jQuery validationEngine怎么为表单元素动态添加一个验证规则

function _customRegex(caller,rules,position){// VALIDATE REGEX RULES

var customRule= rules[position+1];

var pattern= eval($.validationEngine.settings.allrules[customRule].regex);

if(!pattern.test($(caller).attr('value'))){

$.validationEngine.isError= true;

promptText+=$.validationEngine.settings.allrules[customRule].alertText+"<br/>";

i=rules.length;

}

在.js文件中有这个方法是专门用来验证正则的所以验证正则最简单的办法就是直接在-cn.js文件中添加

"identitys":{

"regex":/(^\d{15}$)|(^\d{17}([0-9]|X)$)/,

"alertText":"*请输入有效的身份证号码"}

然后使用的时候直接custom[identitys]

还有.js中_funcCall()这个方法是专门用来自定义验证规则的，直接执行你写好的js方法来得到验证

比方说你写好了一个js方法 function ABC(){

if(验证通过)

{ return true;}

else

{ return false;}

}

然后在-cn.js文件中添加

"CBA":{

"nname":"ABC",

"alertText":"*验证结果错误"}

最后调用的时候直接funcCall[CBA]

这两种常用点吧基本问题都能解决了

关于validationengine的内容到此结束，希望对大家有所帮助。

java判断类型？Java中怎么知道一个变量的类型background-position CSS background-position的定义和用法