`

关于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>
发表评论

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

相关推荐

    Layui Form 自定义验证的实例代码

    今天小编就为大家分享一篇Layui Form 自定义验证的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    js验证框架实现代码分享

    本文实例为大家分享了js验证框架，很实用，供大家参考，具体内容如下 1、关键方法和原理： function check(thisInput) 方法中的 if (!eval&#40;scriptCode&#41;) { return false; } 2、调用示例： 复制代码 ...

    WordPress联系表单插件Contact Form 7

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

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

    jQuery ajax提交Form表单实例(附demo源码)

    如果要提交现有Form需要写很多代码，何不直接将Form的提交直接转移到ajax中呢。 以前的处理方法 如Form代码如下： &lt;form id="Form1" action="action.aspx" method="post" &gt; 名称：&lt;input name="name" type...

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

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

    Vue from-validate 表单验证的示例代码

    本篇文章主要介绍了Vue from-validate 表单验证的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    BootStrap表单验证实例代码

    下面给大家分享bootstrap表单验证实例代码，具体代码如下所示： &lt;&#37;@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;&#37;@ include file="../include/taglib....

    vue elementui form表单验证的实现

    业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！ 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。 2...

    vue中使用element-ui进行表单验证的实例代码

    主要介绍了vue中使用element-ui进行表单验证的实例代码，本文给大家分享实现思路，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

    JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

    本文实例总结了JS表单验证方法。分享给大家供大家参考，具体如下： 回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改: 包含页: Check-Form.js 代码如下: //规则...

    Python通过Django实现用户注册和邮箱验证功能代码

    本文主要向大家分享了Python编程中通过Django模块实现用户注册以及邮箱验证功能的简单介绍及代码实现，具体如下。 用户注册: 类似于用户登陆，同样在users.views.py中添加RegisterView(View)类，其中对表单的get和...

    验证手机号码的JS方法分享

    第一个： 代码如下:function Checkreg() { //验证电话号码手机号码，包含153，159号段 if (document.form.phone.value==”” && document.form.UserMobile.value==””){ alert&#40;“电话号码和手机号码至少选填一...

    jquery实现表单验证简单实例演示

    本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 直接上插件实现代码了，围绕代码进行讲解比较容易点： /* 描述：基于jquery的表单验证插件。 */ ...

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator，供大家参考，具体内容如下 1、初级用法 来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要...

    formvalidation.io:FormValidation的官方网站，JavaScript验证库

    FormValidation网站建立在FormValidation源代码 ：使可重用的UI组件 ：支持路由的Svelte Web框架：Bundler指令在本地运行$ npm install$ npm run dev 然后访问 。 导出到静态文件$ npm run export 然后，将整个站点...

    JS表单验证的代码(常用)

    最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到软件开发网平台，供大家学习，需要的朋友参考下吧！ 注册验证： [removed][removed] //验证表单 function vailForm(){ var form = ...

    Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法

    分享给大家供大家参考，具体如下： 同时公司又要开发一个群组功能..我也就想运用一下Zend_Form来实现创建群组的功能.主要还是看中Zend_Form可以在写Form时候.实现服务器端的验证功能..省得我们在把数据提交到数据库...

    Asp.net Mvc表单验证气泡提示效果

    本文实例为大家分享了Asp.net Mvc表单验证的制作代码，供大家参考，具体内容如下 将ASP.NET MVC或ASP.NET Core MVC的表单验证改成气泡提示: //新建一个js文件(如:jquery.validate.Bubble.js),在所有要验证的页面...

    layui.js实现的表单验证功能示例

    分享给大家供大家参考，具体如下： 该示例可针对文本框，手机，邮箱，textarea等格式进行验证 首先引入如下文件： [removed][removed] [removed][removed] &lt;link rel="stylesheet" href="layui/css/layui.css" ...

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