昨天拿到一个前端传来的个人注册的页面，说里面可以完美的验证各个控件，然后有些许好奇，就去看了看。发现用了一个js的验证框架 名曰： formValidator 。
简单的看了看，还是基于jquery的一套玩意儿~ 用起来还是不错的，导入js后，基本只需要一句话就可以搞定
<link type="text/css" rel="stylesheet" href="${rooturl}js/from/validator.css"></link>
<script src="${rooturl}js/from/formValidator-4.0.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="${rooturl}js/from/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script src="${rooturl}js/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
上面是导入js，这里jquery用的是目前的最高版本，在用1.3.2的时候，自定义了一些代码报错，原因还没有细看。
$("#xingming").formValidator({
onShow:"请输入姓名",
onFocus:"至少1个长度",
onCorrect:"正确"}).inputValidator({
min:1,
empty:{leftEmpty:false,rightEmpty:false,emptyError:"姓名两边不能有空符号"},
onError:"姓名不能为空,请确认"});
$("#password1").formValidator({
onShow:"请输入密码",
onFocus:"至少1个长度",
onCorrect:"密码合法"}).inputValidator({
min:1,
empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},
onError:"密码不能为空,请确认"});
$("#password2").formValidator({
onShow:"输再次输入密码",
onFocus:"至少1个长度",
onCorrect:"密码一致"}).inputValidator({
min:1,
empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},
onError:"重复密码不能为空,请确认"}).compareValidator({desID:"password1",operateor:"=",onError:"2次密码不一致,请确认"});
这是用户和密码的验证，不论是效果还是功能上都是很不错的。配置也比较简单。下面是通过ajax去验证用户名的有效性的方式
$(document).ready(function(){
$("#us").formValidator(
{onShow:"请输入用户名",onFocus:"用户名至少5个字符,最多20个字符",onCorrect:"该用户名可以注册"})
.inputValidator({min:5,max:20,onError:"你输入的用户名非法,请确认"})
.ajaxValidator({
dataType : "html",
data : encodeURI( $("#us").val()),
async : true,
url : "${rooturl}us/checkUserName",
success : function(data){
if( data.indexOf("此用户名可以注册!") > 0 ) return true;
if( data.indexOf("此用户名已存在,请填写其它用户名!") > 0 ) return false;
return false;
},
buttons: $("#button"),
error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据，可能服务器忙，请重试"+errorThrown);},
onError : "该用户名已存在，请更换用户名",
onWait : "正在对用户名进行合法性校验，请稍候..."
});
});
相信有写过这样代码的同学或者有用过一些通过jquery的ajax方式调用servlet的方式实现功能的小插件的同学都应该不难看懂这样的东西。
整体来看功能还是一切ok的，扩展性也是ok的。这里不做太多解释，如有兴趣大家可以试用下，有问题可以一起探讨~
