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