论坛首页 Web前端技术论坛

关于form验证代码分享

浏览 10110 次
精华帖 (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;
		}
	};
	

 

   发表时间: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 看着头都大了

1 请登录后投票
   发表时间:2009-08-21  
网上找个通用的验证好了
或者用jquery官方的form验证
0 请登录后投票
   发表时间:2009-08-22  
js是一个***,自己随便用个就行

主要我是说这么做可以不用写额外代码

des="****" name="****" id="****" value="" restrict="required int"
0 请登录后投票
   发表时间:2009-08-22   最后修改:2009-08-23



看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html

 

0 请登录后投票
   发表时间:2009-08-23  
汗……js验证用什么都可以……我的意思主要在下面三点

error_tag_id
restrict attribute
warn_type

当然也可以说在onload时候来个init_form_valid

……汗,你们都强调js验证具体value了,这个在网上都找的到

0 请登录后投票
   发表时间:2009-08-23  
当然,还有我时时吹捧的blueprint……谁让我css差劲呢……5555
0 请登录后投票
   发表时间:2009-08-23  
jianguang_qq 写道



看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html

 

regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确">

 

这种,具体放到js里撒,写到input里……多不好看……

0 请登录后投票
   发表时间:2009-08-23   最后修改:2009-08-23
key232323 写道
jianguang_qq 写道



看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html

 

regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确">

 

这种,具体放到js里撒,写到input里……多不好看……

 

lz显然没有仔细看别人写的代码,也没看别人写的使用方法。

给lz一个参考的原因是我实在看不下lz的代码,随便网上搜了一个,觉得值得lz学习,就发给lz看了,是好意。

上javaeye的目的是学习。如果有人能给我写的代码提出更好的实现方式,我一定非常感谢他。如果我写的代码没有人可以给我提出更好的建议,那我就没有必要来这里了。

lz的代码只要轻轻一改(把你的几个if else改成switch(或者再好些,用一个数组来循环),把那么多个check_...函数合为一个)就能让你的代码量减少2/3,可读性,科维护性提高好几倍。把易变的东西抽象出来,同样的代码不要拷贝多次。

0 请登录后投票
   发表时间:2009-08-23  
http://badqiu.iteye.com/blog/289306

看看这个。je用的也是这个
1 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics