|
锁定老帖子 主题：关于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
|
| 返回顶楼 | |
