锁定老帖子 主题:关于form验证代码分享
精华帖 (0) :: 良好帖 (0) :: 新手帖 (2) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2009-08-19
最后修改:2009-08-24
后端验证就不说了
js验证的——以前下载过普元的一个js验证的代码。很多,我自己也写了一个simple的,但还算好用。为了使form好看点,用了blueprint。JQuery可选。
下面贴几段代码
php template file, html head
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>{$page_title}</title> <!-- Framework CSS --> <link rel="stylesheet" href="__PUBLIC__/Blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="__PUBLIC__/Blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="__PUBLIC__/Blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]--> <!-- Import fancy-type plugin for the sample section. --> <link rel="stylesheet" href="__PUBLIC__/Blueprint/plugins/fancy-type/fancy-type.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="__PUBLIC__/Blueprint/plugins/buttons/buttons.css" type="text/css" media="screen, projection"> <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/weebox.css" /> <present name="ext_css_file_list"> <iterate name="ext_css_file_list" id="css_file"> <link rel="stylesheet" type="text/css" href="{$css_file}" /> </iterate> </present> <if condition="$include_kindeditor"> <!-- Kindeditor Js --> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Kindeditor/src/lang/zh_CN.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Kindeditor/src/kindeditor-core.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Kindeditor/src/plugin-all.js"></script> <script type="text/javascript"> KE.show({ id : '{$textarea_id}' }); </script> </if> <!-- JQuery Js Include by Default --> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Js/valid-simple.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Js/jquery1.2.6.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Js/jquery.weebox.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Js/bgiframe.js"></script> <present name="ext_js_file_list"> <iterate name="ext_js_file_list" id="js_file"> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/Js/{$js_file}"></script> </iterate> </present>
php template file
<include file="Blueprint:page-pre" /> <include file="Blueprint:page-head" /> <include file="Blueprint:page-body" /> <div class="container-700"> <h2>添加新的商品</h2> <form id="dummy" action="__APP__/AdminGoods/goods_add" method="post" onsubmit="return check_submit(this);"> <input type="hidden" name="md" value="goods-item" /> <fieldset> <legend>请完整填写下面的内容</legend> <present name="error"> <div class="span-6 error"> {$error} </div> </present> <div class="span-6 error" id="show_error_span" style="display: none;"> </div> <p><label for="field_sn">编号</label><br /> <input type="text" class="text" des="编号" name="field_sn" id="field_sn" value="" restrict="required"></p> <p><label for="field_name">名称</label><br /> <input type="text" class="text" des="名称" name="field_name" id="field_name" value="" restrict="required"></p> <p><label for="field_cate_id">分类</label><br /> <select class="text" id="field_cate_id" name="field_cate_id"> <iterate name="cate_list" id="one_cate"> <if condition="$one_cate['id'] eq $data['cate_id']"> <option value="{$one_cate.id}" selected> {$one_cate.sup_name}——{$one_cate.name} </option> <else /> <option value="{$one_cate.id}"> {$one_cate.sup_name}——{$one_cate.name} </option> </if> </iterate> </select></p> <p><label for="field_brand_id">品牌</label><br /> <select class="text" id="field_brand_id" name="field_brand_id"> <iterate name="brand_list" id="one_brand"> <if condition="$one_brand['id'] eq $data['brand_id']"> <option value="{$one_brand.id}" selected> {$one_brand.name} </option> <else /> <option value="{$one_brand.id}"> {$one_brand.name} </option> </if> </iterate> </select></p> <p><label for="field_tag">标签</label><br /> <input type="text" class="text" name="field_tag" id="field_tag" value=""></p> <p><label for="field_goods_number">存货数量</label><br /> <input type="text" class="text" des="存货数量" name="field_goods_number" id="field_goods_number" value="" restrict="required int"></p> <p><label for="field_market_price">市场价格</label><br /> <input type="text" class="text" des="市场价格" name="field_market_price" id="field_market_price" value="" restrict="required double"></p> <p><label for="field_shop_price">商城价格</label><br /> <input type="text" class="text" des="商城价格" name="field_shop_price" id="field_shop_price" value="" restrict="required double"></p> <p><label for="field_brief">简介</label><br /> <input type="text" class="text" name="field_brief" id="field_brief" value=""></p> <p><label for="field_detail">详细介绍</label><br /> <textarea name="field_detail" style="display:none"></textarea> <iframe id="Editor" name="Editor" src="/Public/Js/Editor/htmltool.htm?id=field_detail&height=200" frameborder="0" marginheight="0" marginwidth="0" scrolling="No" style="width: 100%; height: 200px;"></iframe></p> <p><button type="submit" class="button positive">添加</button> <button type="reset" class="button nagetive">重置</button></p> </fieldset> </form> </div> <include file="Blueprint:page-suf" />
修改了一下的js // 错误提示类型,1为alert,2为weebox提示,3为display一个div var warning_type = 3; var warning_msg = ""; var warningImagePath = '/Public/Images/'; var error_tag_id = 'show_error_span'; function show_error(msg){ switch(warning_type){ case 1: alert(msg); break; case 2: $.weeboxs.open(msg, {type:'error'}); break; case 3: $("#" + error_tag_id).html(msg); $("#" + error_tag_id).show(); break; } } function check_submit(form_obj){ for (var i = 0; i < form_obj.elements.length; i++) { var field_obj = form_obj.elements[i]; if(field_obj.getAttribute("restrict") != null){ if(!check_required(field_obj, false)) return false; } } return true; }; function check_query_submit(form_obj){ check_submit(form_obj); }; function check_required(field_obj, blank_accept){ var value = field_obj.value; if(blank_accept && value=='') return true; var restrict_list = field_obj.getAttribute("restrict"); var obj_name = field_obj.getAttribute("des"); if(obj_name == null){ obj_name = ""; }else{ obj_name += '-'; } if(restrict_list != null){ var r_arr = restrict_list.split(" "); for(var i = 0; i < r_arr.length; i++){ var limit_str = r_arr[i]; // alert(limit_str); // return false; switch(limit_str){ case('none'): return true; case('required'): if(!check_blank(value, obj_name)){ field_obj.focus(); return false; } break; case('int'): if(!check_number(value, obj_name)){ field_obj.focus(); return false; } break; case('double'): if(!check_double(value, obj_name)){ field_obj.focus(); return false; } break; case('decimal'): if(!check_double(value, obj_name)){ field_obj.focus(); return false; } break; case('email'): if(!check_email(value, obj_name)){ field_obj.focus(); return false; } break; case('date'): if(!check_date(value, obj_name)){ field_obj.focus(); return false; } break; case('time'): if(!check_time(value, obj_name)){ field_obj.focus(); return false; } break; case('url'): if(!check_url(value, obj_name)){ field_obj.focus(); return false; } break; case('ip'): if(!check_ip(value, obj_name)){ field_obj.focus(); return false; } break; default: return true; } } return true; } }; function check_blank(value, obj_name){ if(value != ''){ return true; }else{ show_error(obj_name + "所填不能为空!"); return false; } }; function check_number(value, obj_name){ var reg = "^[0-9]*$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的数字!"); return false; } }; function check_double(value, obj_name){ var reg = "^[0-9]+(\.[0-9]+)?$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的双精度数字!"); return false; } }; function check_ip(value, obj_name){ var reg = "^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的IP地址!"); return false; } }; function check_url(value, obj_name){ var reg = "^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的URL地址!"); return false; } }; function check_email(value, obj_name){ var reg = "^[a-zA-Z0-9_-]+(\.([a-zA-Z0-9_-])+)*@[a-zA-Z0-9_-]+[.][a-zA-Z0-9_-]+([.][a-zA-Z0-9_-]+)*$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的email地址!"); return false; } }; function check_date(value, obj_name){ var reg = "^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的日期格式!"); return false; } }; function check_time(field_obj, obj_name){ var reg = "^[a-zA-Z0-9_-]+(\.([a-zA-Z0-9_-])+)*@[a-zA-Z0-9_-]+[.][a-zA-Z0-9_-]+([.][a-zA-Z0-9_-]+)*$"; var reg_obj = new RegExp(reg); if(value.match(reg_obj)){ return true; }else{ show_error(obj_name + "所填必须为有效的时间格式!"); return false; } }; function check_str_len(field_obj, len){ var value = field_obj.value; if(value.length < len){ show_error(obj_name + "最少长度必须为"+len+"!"); return false; }else{ return true; } };
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2009-08-19
最后修改:2009-08-19
if(limit_str == 'none') return true; if(limit_str == 'int'){ if(!check_number(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'double'){ if(!check_double(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'decimal'){ if(!check_double(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'email'){ if(!check_email(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'date'){ if(!check_date(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'time'){ if(!check_time(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'url'){ if(!check_url(value, obj_name)){ r_v = 1; field_obj.focus(); } }else if(limit_str == 'ip'){ if(!check_ip(value, obj_name)){ r_v = 1; field_obj.focus(); } }else{ } 如果你把那么的判断改为switch case 呢. 一大堆的if else 看着头都大了 |
|
返回顶楼 | |
发表时间:2009-08-21
网上找个通用的验证好了
或者用jquery官方的form验证 |
|
返回顶楼 | |
发表时间:2009-08-22
js是一个***,自己随便用个就行
主要我是说这么做可以不用写额外代码 des="****" name="****" id="****" value="" restrict="required int" |
|
返回顶楼 | |
发表时间:2009-08-22
最后修改:2009-08-23
囧
|
|
返回顶楼 | |
发表时间:2009-08-23
汗……js验证用什么都可以……我的意思主要在下面三点
error_tag_id restrict attribute warn_type 当然也可以说在onload时候来个init_form_valid ……汗,你们都强调js验证具体value了,这个在网上都找的到 |
|
返回顶楼 | |
发表时间:2009-08-23
当然,还有我时时吹捧的blueprint……谁让我css差劲呢……5555
|
|
返回顶楼 | |
发表时间:2009-08-23
jianguang_qq 写道
囧
regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确">
这种,具体放到js里撒,写到input里……多不好看…… |
|
返回顶楼 | |
发表时间:2009-08-23
最后修改:2009-08-23
key232323 写道
jianguang_qq 写道
囧
regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确">
这种,具体放到js里撒,写到input里……多不好看……
lz显然没有仔细看别人写的代码,也没看别人写的使用方法。 给lz一个参考的原因是我实在看不下lz的代码,随便网上搜了一个,觉得值得lz学习,就发给lz看了,是好意。 上javaeye的目的是学习。如果有人能给我写的代码提出更好的实现方式,我一定非常感谢他。如果我写的代码没有人可以给我提出更好的建议,那我就没有必要来这里了。 lz的代码只要轻轻一改(把你的几个if else改成switch(或者再好些,用一个数组来循环),把那么多个check_...函数合为一个)就能让你的代码量减少2/3,可读性,科维护性提高好几倍。把易变的东西抽象出来,同样的代码不要拷贝多次。 |
|
返回顶楼 | |
发表时间:2009-08-23
|
|
返回顶楼 | |