一个简单的验证框架

工作中经常要进行表单验证，一个网站做下来，自己也积累了一套。放出来做个备份！

框架的两个核心方法，一个是用于处理提示信息，另一个是调用验证函数！

//用于显示错误提示
//HTML 格式 <div class="l tips"><em id="err-intro"></em></div>
//@param id 元素的CSS表达式
//@param status
//0 表示失败，这时第三个参数有效，显示这红色字
//1表示成功，会在此元素的父节点上添加一个叫okey的类名，显示绿色的勾号
//2表示隐藏，去掉元素的innerHTML与父节点上的okey的类名
//@param msg 错误消息
function  showTip(id, status, msg){
    var  el = $(id), parent = el.parent(), node = el[0], nodes = showTip.nodes;
    switch (status){
        case  0 :
            parent.removeClass( "okey" );
            if (node){
                node.innerHTML = msg
                if ($.Array.indexOf(nodes, node) == -1){ //用去统计当前页面有多少个验证没有被通过
                    nodes.push(node);
                }
            }
            break ;
        case  1:
            parent.addClass( "okey" );
            if (node){
                node.innerHTML = "" ;
                $.Array.remove(nodes, node);
            }
            break
        case  2:
            parent.removeClass( "okey" );
            if (node){
                node.innerHTML = "" ;
                $.Array.remove(nodes, node);
            }
            break
    }
}
showTip.nodes = [];
/**
 *@param root 绑定事件的元素的CSS选择器，通常是form元素
 *@param name 控件的类名，要去掉前面的点号。之所以用类名，因为checkbox是一组的，共用一个name值，不能用ID
 *@param obj 验证用的函数与错误提示，错误提示作为键名，函数为值。
 *@param checktype 触发验证用的事件名，默认为blur
 */
function  validate(root, name, obj, checktype){
    checktype = checktype || "blur"
    $(root).delegate( "." +name, checktype, function (){
        var  ok = true
        for ( var  msg in  obj){
            if (!obj[ msg ]( this )){
                showTip( "#err_" +name, 0 , msg ); //失败了就显示红色的错误提示
                ok = false ;
                break
            }
        }
        if (ok){
            showTip( "#err_" +name, 1); //显示成功提示，绿色的勾号
        }
    } ).delegate( "." +name, "focus" , function (){
        showTip( "#err_" +name, 2); //隐藏所有提示！
    })
}
/*
 * 根据手机号码获取运营商的序号
 * @param { Number } 11位手机号码
 * @return { Number } 各运营商对应的序号
 * 0 : 移动，1 : 联通，2 ： 电信，-1 : 号码错误
 */
var  getISP = function ( number ){
    var  rCMCC = /^(139|138|137|136|135|134|159|158|152|151|150|157|188|187|147|182|183)[0-9]{8}$/,  // 移动
        rUNICOM = /^(130|131|132|155|156|186|185)[0-9]{8}$/,    // 联通
        rCT = /^(133|153|189|180)[0-9]{8}$/;    // 电信

    return  rCMCC.test(number) ? 0 :
        rUNICOM.test(number) ? 1 :
        rCT.test(number) ? 2 :
        -1;
};

表单的结构。每一个表单都有一个与它name值同名的类名，并且还有span标签用于放置错误消息，span里面有个em元素，它的类名比控件的类名多了一个“err_”前缀！

< form  id = "add_widget_form" >
        < table   id = "add_widget_table"  >
            < tbody >
               < tr >
                    < td  align = "right" >名称：</ td >
                    < td >
                        < input  name = "name"  class = "name"  style = "width:200px;" />
                        < span  class = "tips" >< em  id = "err_name" ></ em ></ span >
                    </ td >
                </ tr >
                < tr >

                    < td  align = "right" >尺寸：</ td >
                    < td >高< input  name = "height"  class = "height"  style = "width:100px;"  value = "200"  /> px
                        宽< input  name = "width"  class = "width"   style = "width:100px;"  value = "700"   /> px
                        < span  class = "tips" >< em  id = "err_height" ></ em ></ span >
                        < span  class = "tips" >< em  id = "err_width" ></ em ></ span >
                    </ td >
                </ tr >
                < tr >
                    < td  align = "right" >视频数：</ td >
                    < td >
                        < input  name = "video_count"  class = "video_count"  style = "width:200px;"  />个
                        < span  class = "tips" >< em  id = "err_video_count" ></ em ></ span >
                    </ td >
                </ tr >
             </ tbody >
           </ table >
  < center >< button  id = "submit_info"  class = "widget_btn"  type = "button" >< span >完善信息</ span ></ button ></ center >
</ form >

简单示例：

validate( "#add_widget_form" , "name" ,{
    "不能为空" : function (el){
        return  $.trim(el.value).length != 0
    }
});
var  checkNumber = {
    "只能填一个正整数" : function (el){
        var  i = el.value;
        return   Number(i) > 0 &&  parseInt( i ) === Number(i);
    }
}
validate( "#add_widget_form" , "width" , checkNumber);
validate( "#add_widget_form" , "height" ,checkNumber)
validate( "#add_widget_form" , "video_count" ,{
    "数量在1~10之间" : function (el){
        var  i = el.value
        return   Number(i) > 0 &&  Number(i) < 11 && parseInt( i ) === Number(i);
    }
});
validate( "#add_widget_form" , "email" ,{ //判定邮箱
    "格式不正确" : function (el){
        var  val = $.trim(el.value);
        return  /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(val)
    }
});
validate( "#add_widget_form" , "phone" ,{ //判定手机号码
    "格式不正确" : function (el){
        var  val = $.trim(el.value);
        return  /^(13|15|18|14)\d{9}$/.test(val)
    }
});

如果有一些验证一定要在后端，那么发现出错，就把它们放到一个对象中，格式{类名：出错提示,类名2：出错提示2,类名3：出错提示3}，即

$( "#submit_info" ).click( function (){
        if (showTip.nodes.length){
                return  //如果当前页面还有验证没有通过,就不用提交到后台了!
        }
        $.post(url, params, function (json){
            if (json.err == "ok" ){
                alert( "成功了" )
            } else {
                for ( var  i in  json.msg){
                    showTip( "#err_" +i, 0, json.msg[i]); //找到.tips标签下的EM元素,填写错误提示!
                }
            }
        })
})

 

 

标签:  javascript