LiveValidation用法

第一步，下载相关的livevalidation的JS库文件，下载的链接为：http://livevalidation.com/download

第二步，在使用的页面，关联livevalidation的js文件。

<script type="text/javascript" src="js/LiveValidation.js"></script>
<link rel="stylesheet" type="text/css" href="css/LiveValidation.css">

需要说明的是，在下载的包中，并没有对应的CSS文件，此验证样式，可以在

http://livevalidation.com/examples 。中找到相关的相关的样式，保存至样式文件，再把该样式文件链接至相关页面。

第三步，至于LiveValidation的用法，已经有相关的例子提供了，读者可以在http://livevalidation.com/examples， 页面中找到的例子。

下面的例子主要关注错误提示信息以及错误提示插入点。

//validMessage验证成功后，提示信息。wait用户停止输入多少毫秒后，进行校验。
var userName = new LiveValidation("userName", {validMessage : "OK!",wait : 500});
//存在性校验，就是不允许输入值为空。
userName.add(Validate.Presence, {failureMessage : "请输入用户名!"});
//对于输入值进行格式校验。
userName.add(Validate.Format, {pattern : /^[a-zA-Z][a-zA-Z0-9_]{3,29}$/,failureMessage : "用户名只能包括英文、数字、下划线字符."});

 

 输入值长度校验

//特定长度校验
var validateCode = new LiveValidation('validateCode', {validMessage : "OK!",wait : 500});
validateCode.add(Validate.Length, { is: 4,wrongLengthMessage : "验证码长度为4位!"} );
 
//最小长度校验
var md5key = new LiveValidation("md5key", {validMessage : "OK!",wait : 500});
md5key.add(Validate.Length, { minimum: 8,tooShortMessage : "MD5密匙的长度不能小于8位!"} );
 
//最大长度校验
var fax = new LiveValidation("fax", {validMessage : "OK!",wait : 500});
fax.add(Validate.Length, { maximum: 13,tooLongMessage : "传真号码长度不能超过13个字符!"} );
 
//长度范围校验         
var password = new LiveValidation("password", {validMessage : "OK!",wait : 500});
password.add(Validate.Length, { minimum: 6, maximum: 16,tooShortMessage : "密码的长度不能小于6位!",tooLongMessage : "密码的长度不能大于16位!"} );

 

 排除校验。排除校验我主要用在的下拉框中

var province = new LiveValidation('province');
province.add(Validate.Exclusion, { within: ['请选择省份...'], failureMessage: "请选择所在省份!!"});

 

 确认校验最典型的就是密码了，请看例子：

var password = new LiveValidation("password", {validMessage : "OK!",wait : 500});
var confirmPassword = new LiveValidation("confirmPassword", {validMessage : "OK!",wait : 500});
confirmPassword.add(Validate.Presence, {failureMessage : "请输入确认密码!"});
confirmPassword.add( Validate.Confirmation, { match: 'password' ,failureMessage : "两次输入的密码不匹配!"} );

 

Email校验，因为Email校验比较典型，所以LiveValidation已内置，不需要在手写正则去校验了。

var email = new LiveValidation("email", {validMessage : "OK!",wait : 500});
email.add( Validate.Email );

 

 更改错误信息插入点，默认就是插入验证的元素之后，同时也可以指定错误信息插入点，那么就需要insertAfterWhatNode属性.

var validateCode = new LiveValidation('validateCode', {validMessage : "OK!",insertAfterWhatNode:"codeNext" ,wait : 500});
validateCode.add(Validate. Length, { is: 4,wrongLengthMessage : "验证码长度为4位!" } );