JS表单验证组件浅讲



//验证器
Checker =function(){
 
}

//必验证项集合
Checker.items=new Array();

//获取数组的大小

Array.size=function(obj){
 return length(obj);
}

//长度验证--可由此定义常规的验证

Checker.lenCheck=function(obj,min,max,isReq,msg_info,msg_ok,msg_error){
 joinReq(obj,isReq);
 $(obj).blur(function(){
  if($(obj).val().length.trim()>=min&&$(obj).val().length.trim()<max){
   Checker.items[$(this).attr("id")]=true;
   $("#msg").html(msg_ok);
  }else{
   Checker.items[$(this).attr("id")]=false;
   $("#msg").html(msg_error);//注意此处只是引子，具体业务需要编写相应的组件
  }
 }).focus(function(){

     //加入提示功能

  });  
};

//如果必要项，加入必验证数据集

joinReq=function(obj,isReq){
 if(isReq){   
  var id=$(obj).attr("id");
  Checker.items[id]=false;

 } 
};

$(function(){
 $("#frm").submit(function(){//绑定表单提交事件
  

  //遍历确认其中是存在验证没有通过项
  var len=Array.size(Checker.items));

  var isPass=true;
  for(var o in Checker.items){

    if(!Checker.items[o]){//等于false说明该项为必验项，但可能还没有输入（没有验证），也有可能是输入后，但验证未通过项

        $(o).blur(); //触发验证

        isPass=false;

    }

 }
  return isPass;
   
 });
});

function length(obj){
 if(typeof(obj)=='string'){
  return obj.length; 
 }else if(typeof(obj)=='object'){
  var i=0;
  for(var t in obj){
   i++;
  }
  return i;
 }else{
  return 0; 
 }
}
$(function(){ 
 
 Checker.lenCheck($("#userName"),2,10,true,"用户名不能为空","OK"，“ERROR”);
 Checker.lenCheck($("#password"),2,10,true,"密码不能为空","OK"，“ERROR”);
 Checker.lenCheck($("#email"),2,10,true,"邮箱不能为空","OK"，“ERROR”);
 
 
});