`

关于form验证代码分享

CSSJavaScriptjQueryEXTQQ 
阅读更多

后端验证就不说了

 

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;
		}
	};

 

分享到：
| 下载了人家的数据——中国行政区编码（电话 ...
评论
13 楼 jianguang_qq 2009-08-24  
jianguang_qq 写道
key232323 写道
学习受教。呵呵，可能总是被否定，心中小不悦而已。

但正如ls所说，来这是学习的，分享是互相学习的。


呵呵，大家有一样，被人否定，总有不悦。
说明你心态还很好

12 楼 jianguang_qq 2009-08-24  
key232323 写道
学习受教。呵呵，可能总是被否定，心中小不悦而已。

但正如ls所说，来这是学习的，分享是互相学习的。


呵呵，大家有一样。说明你心态还很好
11 楼 bencode 2009-08-24  
这个是我分享的一个js验证框架,自开发后,我一直使用他来进行前端的验证.

http://bencode.iteye.com/admin/blogs/349204

希望对大家有点点帮助
10 楼 key232323 2009-08-23  
学习受教。呵呵，可能总是被否定，心中小不悦而已。

但正如ls所说，来这是学习的，分享是互相学习的。
9 楼 wxq594808632 2009-08-23  
http://badqiu.iteye.com/blog/289306

看看这个。je用的也是这个
8 楼 jianguang_qq 2009-08-23  
<div class="quote_title">key232323 写道</div>
<div class="quote_div">
<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<p>囧<br><br>看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html</p>
<p> </p>
</div>
<p>regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确"&gt;</p>
<p> </p>
<p>这种，具体放到js里撒，写到input里……多不好看……</p>
</div>
<p> </p>
<p>lz显然没有仔细看别人写的代码，也没看别人写的使用方法。</p>
<p>给lz一个参考的原因是我实在看不下lz的代码，随便网上搜了一个，觉得值得lz学习，就发给lz看了，是好意。</p>
<p>上javaeye的目的是学习。如果有人能给我写的代码提出更好的实现方式，我一定非常感谢他。如果我写的代码没有人可以给我提出更好的建议，那我就没有必要来这里了。</p>
<p>lz的代码只要轻轻一改（把你的几个if else改成switch（或者再好些，用一个数组来循环），把那么多个check_...函数合为一个）就能让你的代码量减少2/3，可读性，科维护性提高好几倍。把易变的东西抽象出来，同样的代码不要拷贝多次。</p>
7 楼 key232323 2009-08-23  
<div class="quote_title">jianguang_qq 写道</div>
<div class="quote_div">
<p>囧<br><br>看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html</p>
<p> </p>
</div>
<p>regexp="^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$" msg="信箱格式不正确"&gt;</p>
<p> </p>
<p>这种，具体放到js里撒，写到input里……多不好看……</p>
6 楼 key232323 2009-08-23  
当然，还有我时时吹捧的blueprint……谁让我css差劲呢……5555
5 楼 key232323 2009-08-23  
汗……js验证用什么都可以……我的意思主要在下面三点

error_tag_id
restrict attribute
warn_type

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

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

4 楼 jianguang_qq 2009-08-22  
<p>囧<br><br>看看别人的代码 http://pcedu.pconline.com.cn/empolder/wz/javascript/0412/525219.html</p>
<p> </p>
3 楼 key232323 2009-08-22  
js是一个***，自己随便用个就行

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

des="****" name="****" id="****" value="" restrict="required int"
2 楼 jamix 2009-08-21  
网上找个通用的验证好了
或者用jquery官方的form验证
1 楼 猪也有理想 2009-08-19  
<pre name="code" class="js">             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{ 
                  
             } </pre>
<p> <span style="color: #ff0000;">如果你把那么的判断改为switch case 呢.</span></p>
<p>一大堆的if else 看着头都大了</p>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Oracle Form 实战总结

    Oracle Form实战总结主要聚焦在使用Oracle Form Builder进行企业级应用开发的经验分享。Oracle Form是Oracle Application Development Framework (ADF)的一部分，常用于构建基于数据库的桌面和Web应用程序，特别是在...

    Form表单js设计器生成器

    3. **事件处理**: JavaScript允许添加事件监听器到表单元素，例如点击、提交等，从而实现更复杂的功能，如表单验证、动态加载内容等。 4. **代码生成**: 设计完成后，生成器会自动生成HTML和JavaScript代码，开发者...

    WordPress联系表单插件Contact Form 7

    从图中我们可以看到它的相关功能，这里以Quiz为例：这个选项是设置验证问题的，只有正确回答问题后才可以发表留言，点选后，可以在里面设置一下参数(可选项)，设置好后，把“[quiz quiz-数字]”代码拷贝到左边的...

    苹果登录使用Apple服务端验证登录-JAVA源码

    通过阅读和理解这些代码，开发者可以更好地掌握如何在自己的后端服务中集成Apple登录验证。 总的来说，实现Apple服务端验证登录涉及多个技术层面，包括OAuth 2.0协议的理解、JWT的处理以及与Apple API的交互。使用...

    extJs中关于formPanel动态添加组件的验证问题

    在上述博客中，作者可能详细阐述了以上步骤，并可能分享了具体的代码示例，展示了如何在EXT JS环境中实现动态添加组件并确保它们的验证功能正常工作。通过这样的实践，开发者可以灵活地构建动态表单，同时保持数据的...

    Form Plugin API

    关于“jqueryform”，这很可能是压缩包中包含的文件，它是jQuery Form Plugin的具体实现。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。jQuery Form Plugin是基于jQuery的一个...

    JS通用表单验证函数1

    论坛帖子通常会分享代码示例和实践经验，讨论各种数据类型如字符串、数字、日期的验证方法，以及如何处理特殊数据类型如对象和数组。 另一个文件"javaScript通用数据类型校验 - JavaScript - web - JavaEye论坛....

    分享jquery验证

    ### jQuery 验证插件详解 #### 一、引言 在前端开发中，表单验证是必不可少的一个环节。为了确保用户输入的数据符合预期格式，提高用户体验并减轻后端服务器的压力，开发者通常会采用各种前端验证技术。jQuery ...

    FormDesigner基于AntDesign和jQueryUI的表单设计器

    1. **可视化设计**：FormDesigner 提供了一个直观的拖放界面，允许开发者无需编写代码就能设计出复杂的表单结构。 2. **自定义字段类型**：支持多种表单控件，如文本输入框、单选按钮、多选框、下拉菜单等，并可以...

    form-making-advanced.rar

    1.2.16付费高级版 可视化 主流表单设计器页面，通过可视化的操作，快速完成表单页面的创建。 Element 使用基于 Vue 2.0 的桌面端组件库 Elemnet ，使用...丰富的API接口，方便快速的生成表单，验证和获取表单数据。

    PHP留言板分享，代码，界面都很完整

    1. 输入验证：对用户提交的数据进行检查，防止恶意代码。 2. 防SQL注入：使用预处理语句或参数化查询。 3. 防XSS攻击：使用htmlspecialchars函数转义用户输入的HTML特殊字符。 **六、部署与运行** 部署PHP留言板...

    vue 登录滑动验证实现代码

    在没给大家讲解实现代码之前，先给大家分享效果图： 之前别人都是用jq写的，自己整理了一下开始使用 验证&gt; &lt;div class=form-inline-input&gt; &lt;input type=text name=code class=code-input /&gt; &lt;p&gt;&lt;/p&gt; ...

    微信小程序表单验证form提交错误提示效果

    本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码，供大家参考，具体内容如下 表单验证，点击确认发布不能为空错误提示。 以下是效果图： 代码如下： WXML: ...

    6个漂亮的各类型网站源代码打包分享.zip

    在本压缩包“6个漂亮的各类型网站源代码打包分享.zip”中，您将找到六个不同类型的网站源代码，这些都是HTML网页设计的实例。这些源代码对于学习HTML基础、了解网页布局、色彩搭配以及交互设计等方面具有很高的参考...

    filling-form-system.rar_Form_excel

    另一方面，"www.pudn.com.txt"可能是一个链接或引用文件，指向更多关于此系统的资源、文档或示例，可能是在PUDN（一个开源代码和资源分享网站）上找到的。 综合以上信息，我们可以推测这个填表系统可能包含以下知识...

    一行代码禁用CTRL+ALT+DELDisableTask[DisableTask.rar]-精品源代码

    源代码的提供者可能是一位名叫“枕善居”的开发者，他在网上分享了自己的代码，并提供了联系方式和使用指导，这对于想要学习如何控制系统行为或对Windows API有研究的程序员来说是一份宝贵的资源。通过分析"Form1....

    很漂亮的jsp表单验证

    在这个案例中，别人编写了一个表单验证的实现，感觉不错，因此被拿出来分享。 "好看"这个标签可能指的是该验证方案在设计上注重用户体验，不仅实现了功能，还兼顾了界面的美观。一个良好的表单验证设计应该具有直观...

    RFID图书管理系统程序源代码分享.pdf

    RFID图书管理系统程序源代码分享.pdf 本文将对RFID图书管理系统程序源代码进行分析，并对其中蕴含的知识点进行提取和总结。 一、登陆界面 在登陆界面中，我们可以看到使用了C#语言来编写登陆逻辑。代码中引入了多...

    mvc模式的javascript验证框架

    10. **最佳实践**：分享使用该框架时的最佳实践，包括代码组织、错误处理策略和用户体验设计。 通过以上分析，我们可以期待这个JavaScript验证框架能提供一个清晰、可维护的解决方案，帮助开发者在Web应用中实现...

Magicbox
Global site tag (gtag.js) - Google Analytics