---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

一个简单的验证框架

前端开发 蚂蚁 4438℃ 0评论

工作中经常要进行表单验证,一个网站做下来,自己也积累了一套。放出来做个备份!框架的两个核心方法,一个是用于处理提示信息,另一个是调用验证函数!

//用于显示错误提示
//HTML 格式 
//@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元素,填写错误提示!
                }
            }
        })
})

http://www.cnblogs.com/rubylouvre/archive/2012/08/23/2585879.html

转载请注明:有爱前端 » 一个简单的验证框架

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情
(3)个小伙伴在吐槽
  1. 为毛多说镜像都挂了?
    方块网络2015-08-27 09:32 回复
  2. 不错 学习了!
    励志人生2015-12-04 12:28 回复