LiveValidation

键入字符时即时校验!

例子...

这里你将看到 LiveValidation 是如何运行的,以及让这一切起作用的程序代码,我们用这些作为例子来显示它的功能,也可以作为你入门的向导。

重要提示 - 正像你所知道的,仅依赖客户端校验的做法是很不明智的。应该始终在server端也做适当的校验。这个js插件的目的,包括我们通常的javascript校验,并不能替代server端的校验, 只是让用户在填表单时减少一些挫折,帮他们节省时间。

内容


首页例子 顶部

首先,正是针对你的疑惑,首页上的例子包括两种校验 - “存在性校验“确保必填项必填,“格式校验”确保用户输入值中包含 ‘你好’ 字符。下面就是它的运行原理...

说 “你好”:

首先通过把表单域的id作为第一个参数传递,我们就得到了一个 LiveValidation 对象。在这个例子中我们提供了一个可选参数项把“validMessage”的值置换了,可选参数“wait”被设置为500毫秒,是让校验行动在用户停止输入500毫秒后进行:

var sayHello = new LiveValidation( "sayHello", { validMessage: "Hey there!", wait: 500 } );

然后我们添加了“存在性校验”,这个例子在这里也提供了一个用来重置“failureMessage”的参数:

sayHello.add( Validate.Presence, 
              { failureMessage: "别不理我,我想当你的朋友!" } );

最后“格式校验”也被加入,使用的是正则表达式,同样也有一个用来置换“failureMessage”的参数:

sayHello.add( Validate.Format, 
              { pattern: /^hello$/i, failureMessage: "为什么你不说‘你好’?" } );

存在性校验 顶部

如果表单域中没有输入值,“存在性校验”就不能通过。

输入值然后点一下其它地方:

var f1 = new LiveValidation('f1');
f1.add( Validate.Presence );

格式校验 顶部

如果输入的值不能匹配规定的正则表达式,“格式校验”就会提示错误。

请输入包含 “live” 的单词,不分大小写:

var f2 = new LiveValidation('f2');
f2.add( Validate.Format, { pattern: /live/i } );

数字特征校验 顶部

这种校验跟数字相关。它能按照你想要的方式处理科学计数法的数(例如:2e3, being 2000),,浮点数(带小数的数字),负数等,包括校验数的值和数的范围。

基础

这个例子将要校验用户输入的值是否是一个数字,或者说是一个可以被转化成数字的值(例如字符串 - 文本输入框里的值都是字符串)。 校验是在用户的每次点击打字时自动执行,如果你只是想确保用户输入的是个数字,可以简单极致的写成下面的形式。

请输入一个数字:

var f3 = new LiveValidation('f3');
f3.add( Validate.Numericality );

只允许整数

这个例子将要校验输入的数字是一个或者说是等于一个整数值(没有小数位的)。

请输入一个整数:

var f4 = new LiveValidation('f4');
f4.add( Validate.Numericality, { onlyInteger: true } );

特定的数字

这个例子将会校验输入的数字是否等同于你指定的某个特定的数字。

请输入2000 (或者用科学计数法, 2e3):

var f5 = new LiveValidation('f5');
f5.add( Validate.Numericality, { is: 2000 } );

最小约束

这个例子将要校验输入的值是否大于或者等于你提供的一个低限值。

请输入一个等于或者大于2000的值(或者用科学计数法, 2e3):

var f6 = new LiveValidation('f6');
f6.add( Validate.Numericality, { minimum: 2000 } );

最大约束

这个例子将要校验输入的值是否小于或者等于你提供的一个高限值。

请输入一个等于或者小于2000的值(或者用科学计数法, 2e3):

var f7 = new LiveValidation('f7');
f7.add( Validate.Numericality, { maximum: 2000 } );

大小范围限制

这个例子将会校验输入的数值是否在你设定的一个范围内。我们用同时设置 ‘minimum’ 和 ‘maximum’ 来完成这个任务。

请输入一个介于 2000 和 2003 之间的数:

var f8 = new LiveValidation('f8');
f8.add( Validate.Numericality, { minimum: 2000, maximum: 2003 } );

组合校验

上面所提到的大部分参数都能组合使用,唯一例外的是 ‘is’ 参数和 ‘minimum’ 或 ‘maximum’ 的组合, 如果你将他们组合到一起, ‘is’ 条件将会被优先采纳。这个例子将会校验输入的值是否是个数字,而且其大小是否在某个范围内。我们同时使用 ‘minimum’ , ‘maximum’ 和 ‘onlyInteger’来实现这个。

请输入一个介于 2000 和 2003 的整数:

var f9 = new LiveValidation('f9');
f9.add( Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );

长度校验Top

长度校验就是校验输入值中字符的个数。你可以给出任何约束,例如一个特定的长度,或者是高限,低限,或者一个范围。

特定长度

这个例子将会校验输入的值的长度是否精确等于你提供的长度值。

请输入一个只有4个字符的值:

var f10 = new LiveValidation('f10');
f10.add( Validate.Length, { is: 4 } );

低限约束

这个例子将会校验输入的值的长度是否是大于或等于你提供的低限值。

请输入如长度大于或等于4的字符:

var f11 = new LiveValidation('f11');
f11.add( Validate.Length, { minimum: 4 } );

高限约束

这个例子将会校验输入的值的长度是否是小于或等于你提供的低限值。

请输入如长度小于或等于4的字符:

var f12 = new LiveValidation('f12');
f12.add( Validate.Length, { maximum: 4 } );

长度范围限制

这个例子将会校验输入值的长度是否是在你指定的一个范围内。我们通过同时使用 ‘minimum’ 和 ‘maximum’ 来实现这个。

请输入一个长度介于 4 和 8 的字符串:

var f13 = new LiveValidation('f13');
f13.add( Validate.Length, { minimum: 4, maximum: 8 } );

包含校验 Top

包含校验能让你根据一个允许值的清单来检查输入值。你可以做到精确匹配或者部分匹配。

精确匹配

这个例子将会校验输入值是否是允许的值的其中一个。

请输入 “cow”, “pigeon” 或 “giraffe” 其中之一:

var f14 = new LiveValidation('f14');
f14.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );

部分匹配

这个例子将会校验输入值是否在允许的清单中,或者是包含有清单中某个值。我们通过把 ‘partialMatch’ 设置成 true 来实现这个。

请输入含有 “cow”, “pigeon” 或 “giraffe” 的字串:

var f15 = new LiveValidation('f15');
f15.add( Validate.Inclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );

排除校验 顶部

排除校验能让你根据一个不允许值的清单来检查输入值。你可以实现精确匹配和部分匹配。

精确匹配

这个例子校验是否输入值不包含在你提供的清单中

请输入不是 “cow”, “pigeon” 或 “giraffe” 的值:

var f16 = new LiveValidation('f16');
f16.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ] } );

部分匹配

这个例子将会校验输入值是否不包含提供的清单中的任何一个值。我们通过将 ‘partialMatch’ 设置成 true 来实现这个。

请输入不包含 “cow”, “pigeon” 和 “giraffe” 的值:

var f17 = new LiveValidation('f17');
f17.add( Validate.Exclusion, { within: [ 'cow' , 'pigeon', 'giraffe' ], partialMatch: true } );

认可校验 顶部

认可校验是用来检查一个复选框是否被选上。

我同意 LiveValidation 是我理想的校验工具:

var f18 = new LiveValidation('f18');
f18.add( Validate.Acceptance );

确认校验 顶部

这个是用来检查需要确认的表单域是否和另外一个域相匹配。最常见的就是密码确认,就像我们下面演示的那样,但也同样适用于其他类型的校验。

请输入密码:
请确认密码:

var f19 = new LiveValidation('f19');
f19.add( Validate.Confirmation, { match: 'myPasswordField' } );

Email校验 Top

Email校验从实际意义上并不是一种独立的校验类型,它实际上用的是 Validate.Format 方法来实现校验。但是它是一种频繁使用的校验,以至于我们完全有必要把它单独拿出来,这样就可以避免在每次校验时都去回忆那长长的正则表达式和定制校验失败提示信息。

这个例子也可以当作一种二次开发的范例,那些想把自己经常用的校验形式做成自定义校验的人可以参考这个例子。 常见的类型包括邮编,电话号码,日期等,都可以用这种方法实现。但是由于Email地址的普遍性,我们就特意实现了它,下面你就可以看到效果。

请输入一个email地址:

var f20 = new LiveValidation('f20');
f20.add( Validate.Email );

组合校验 (联合校验) 顶部

很多时候,我们会对一个表单域进行多种数据校验。在能给用户即时反馈校验信息的同时,我们也有必要对校验失败提示信息的顺序做一定的要求,这样用户能得到最合适的提示,不至于混淆。

LiveValidation 很容易就能做到这个。你只需要简单按照你的顺序将校验项加入 LiveValidation 对象,校验提示信息就能按照这个顺序反馈出来。

最常见的组合校验是将 Validate.Presence 和其他校验一起使用,但有一个例外 Validate.Presence, Validate.Confirmation 和 Validate.Acceptance 的组合会有问题,校验的提示信息只会显示的到某个空表单域上。因为我们通常一个表单里会有多个表单域,而其中的一些是可选填的,当用户决定要输入信息时,那么我们必须检查输入的字符长度等约束。而如果你要求某个域必填,那你必须加上 Validate.Presence 校验,然后再加一些其它种需要的校验。

在首页的例子中我们已经看到了一个组合校验的例子。下面的例子将会检查输入值是否为空,然后检查它是否是个email格式,最后要确保它的长度在 10 到 20 之间。

请输入一个email地址(长度在10 - 20之间):

var f21 = new LiveValidation('f21');
f21.add( Validate.Presence );
f21.add( Validate.Email );
f21.add( Validate.Length, { minimum: 10, maximum: 20 } );

提交时校验整个表单

当LiveValidation对象被实例化后,如果它发现自己校验的是一个表单里的域,它就会自动的把自己和表单的submint事件绑定到一起,所以当表单提交时,这个表单里所有用LiveValidation校验的域都会自动触发校验活动。只要其中任何一个校验失败,表单的提交都会被终止(当然,这些只是在用户的浏览器中有效,所以你应该在server端也进行校验!)。

你也可以在创建LiveValidation对象时把onlyOnSubmit设置成true,这样校验只会在你提交表单时触发。下面的例子就是演示这样的效果。

请注意,email域并没有设定必填,所以即使不填写email值,校验也能通过,我们把它作为一个可选填项。

这个例子中的表单提交后的输出结果被改写了,因为我们没有地方提交这个表单 - 作为替代,我们只是“alert”这个表单有效,在实际工作中它应该执行这个提交活动。

表单校验例子


var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
field1.add( Validate.Email );
var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
field2.add( Validate.Acceptance );
var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
field3.add( Validate.Presence );

风格化 顶部

LiveValidation 使用了一些 CSS 样式美化根据校验结果输出的校验信息和表单域的样式。

  • LV_validation_message - 这个类作用于所有的校验信息
  • LV_valid - 这个类作用于校验通过的校验信息
  • LV_invalid - 这个类作用于校验失败的校验信息
  • LV_valid_field - 这个类作用于校验通过的表单域
  • LV_invalid_filed - 这个类作用于校验不通过的表单域

为了让你能立刻明白,我们把这个页面上使用的样式列在了下面:

.LV_validation_message{
    font-weight:bold;
    margin:0 0 0 5px;
}

.LV_valid {
    color:#00CC00;
}
	
.LV_invalid {
    color:#CC0000;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #CC0000;
}


© 2007-2008 Alec Hill | MIT license && 由 docman.cn 翻译