`
这些年
  • 浏览: 399858 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

集成前台验证框架

    博客分类:
  • js
 
阅读更多

1:下载地址

         http://www.17sucai.com/pins/312.html

2:加入到项目

        须要把Validform.js和图片加到项目的目录中

3:加入jsp页面

     导入的包:(在提交时会验证所有表单,如果没有submit,使用btnSubmit)

<script type="text/javascript" 
src="resources/tableValidation/tableValid.js"></script>    //导入验证js
<script type="text/javascript"> 
$(function() { 
$(".aa:last").Validform({        //给表单“aa”加上验证,aa必须是from表单,否则会报找不到action
tiptype : 2,                     //表单验证失败的提示方式
btnSubmit:"#btn_sub",            //如果表单中没有from,而是button,这是提交按钮的id   
callback : function(data) { 
if (data.status == "y") { 
setTimeout(function() { 
$.Hidemsg(); 
}, 2000); 
} 
} 
}); 
}) 
</script> 
<style type="text/css"> 
@import "${projectPath}/resources/tableValidation/valid.css";      //加入css
</style>

 

    表单项须要加上控件(ignore="ignore" 空值证验会失效)

<tr>
	<td>频道名称:</td>
	<td><s:input path="channelname" class="form-control"
			placeholder="频道请从rcms中复制"
                       datatype="channelname"                 //证验的类型,包含自带的空值证验,与nullmsg一起用
			nullmsg="请输入频道名称"                 //空值的提示信息
                       errormsg="请在rcms中复制" />                //证验错误信息
        <c:out  value="${channelnameerror}"></c:out>
	</td>
	<td><div class="Validform_checktip">请输入频道名称</div>    //错误信息显示位置
	</td>
</tr>

  4:因为插件不满足需求,须要自己加上datatype为"channelname"的验证 (部分)

$.fn.Validform.sn={
		defaults:{
			tiptype:1,
            ajaxPost:false
		},
		
		regcheck:function(type,gets){
            var reg;
			switch(type){
			    case "*":
				    return true;
				case "positiveinteger": /* 正整数 */
					reg= /^[0-9]*[1-9][0-9]*$/;
					return reg.test(gets);
				case "channelname": /* 频道名称 */
					reg1= /^[a-z0-9][a-z0-9]*:\/\/[a-z0-9][-a-z0-9_]*(\.[a-z0-9][-_a-z0-9]*){1,}$/;
					reg2= /^[a-z0-9][a-z0-9]*:\/\/[*]\.[a-z0-9][-a-z0-9]*(\.[a-z0-9][-a-z0-9]*){1,}$/;
					return reg1.test(gets)||reg2.test(gets);
				default:
					return false;
			}
		},

 5:如果须要特殊须求须要重写checkform:function(obj,parentobj,tiptype,show)(比如我须要判断第一个文本框值比第二个大)

     jsp中的内容

<tr>
	<td>告警上限:</td>
	<td><s:input path="uplimit" class="form-control"
			placeholder="单位(MB)" datatype="positiveinteger" nullmsg="请输入告警上限"
			errormsg="请输入正整数" /></td>
	<td><div class="Validform_checktip">请输入正整数</div>
	</td>
</tr>
<tr>
	<td>告警下限:</td>
	<td><s:input path="downlimit" class="form-control"
			placeholder="单位(MB)" 
                       datatype="*"                   //验证类型为*,js中直接返回true
                       greaterthan="uplimit"          //greaterthan为自己新建的标签,它传上要比较的文本框id
		        nullmsg="请输入告警下限"
                       errormsg="请输入正整数,并小于上限" />
	</td>
	<td><div class="Validform_checktip">请输入正整数</div>
	</td>
</tr>

   Validform.js的checkform:function里加入

 

if(obj.attr("greaterthan")){
				var theother=parentobj.find("input[name="+obj.attr("greaterthan")+"]:first");
				var reg= /^[0-9]*[1-9][0-9]*$/;
				if(obj.val()>=theother.val()||!reg.test(obj.val())){
					errorobj=obj;
					this.showmsg(errormsg,tiptype,{obj:obj},show);
					return false;
				}
			}

 

补充:完整代码

   tableValid.js

/*
	通用表单验证方法
	Validform version 2.0
	For more information, you can visit http://www.rjboy.cn
	By sean at April 7, 2010 - April 22, 2011
	
	Demo:
	$(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在from表单上;
		btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事件的按钮;如果form内含有submit按钮该参数可省略;
		tiptype:1, //可选项 1=>pop box,2=>side tip,默认为1;
		postonce:true, //可选项 是否开启网速慢时的二次提交防御,true开启,不填则默认关闭;
		ajaxPost:true, //使用ajax方式提交表单数据,默认false,提交地址就是action指定地址;
		callback:function(data){
			//返回数据data是json格式,{"info":"demo info","status":"y"}
			//info: 输出提示信息;
			//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
			//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
			
			//这里执行回调操作;
		}
	});
*/

(function($){
	var errorobj=null,// 指示当前验证失败的表单元素;
		msgobj,// pop box object
		msghidden=true, // msgbox hidden?
		tipmsg={// 默认提示文字;
			w:"请输入正确信息!",
			r:"通过信息验证!",
			c:"正在检测信息…",
			s:"请填入信息!",
			v:"所填信息没有经过验证,请稍后…",
			p:"正在提交数据…"
		},
		creatMsgbox=function(){
			if($("#Validform_msg").length!==0){return false;}
			msgobj=$('<div id="Validform_msg"><div class="Validform_title">提示信息<a class="Validform_close" href="javascript:void(0);">&chi;</a></div><div class="Validform_info"></div><div class="iframe"><iframe frameborder="0" scrolling="no" height="100%" width="100%"></iframe></div></div>').appendTo("body");// 提示信息框;
			msgobj.find("a.Validform_close").click(function(){
				msgobj.hide();
				msghidden=true;
				if(errorobj){
					errorobj.focus().addClass("Validform_error");
				}
				return false;
			}).focus(function(){this.blur();});

			$(window).bind("scroll resize",function(){
				if(!msghidden){				  
					var left=($(window).width()-msgobj.width())/2;
					var top=($(window).height()-msgobj.height())/2;
					var topTo=(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+(top>0?top:0);
					msgobj.animate({
						left : left,
						top : topTo
					},{ duration:400 , queue:false });
				}
			});
		};
	
	$.fn.Validform=function(settings){
		var defaults={};
		settings=$.extend({},$.fn.Validform.sn.defaults,settings);
		
		this.each(function(){
			var $this=$(this);
			var posting=false; // 防止表单按钮双击提交两次;
			$this.find("[tip]").each(function(){// tip是表单元素的默认提示信息,这是点击清空效果;
				var defaultvalue=$(this).attr("tip");
				var altercss=$(this).attr("altercss");
				$(this).focus(function(){
					if($(this).val()==defaultvalue){
						$(this).val('');
						if(altercss){$(this).removeClass(altercss);}
					}
				}).blur(function(){
					if($.trim($(this).val())===''){
						$(this).val(defaultvalue);
						if(altercss){$(this).addClass(altercss);}
					}
				});
			});
			
			// 绑定blur事件;
			$this.find("[datatype]").blur(function(){
				var flag=true;
				flag=$.fn.Validform.sn.checkform($(this),$this,settings.tiptype,"hide");

				if(!flag){return false;}
				if(typeof(flag)!="boolean"){// 如果是radio, checkbox,
											// select则不需再执行下面的代码;
					$(this).removeClass("Validform_error");
					return false;
				}
										
				flag=$.fn.Validform.sn.regcheck($(this).attr("datatype"),$(this).val());
				if(!flag){
					if($(this).attr("ignore")==="ignore" && ( $(this).val()==="" || $(this).val()===$(this).attr("tip") )){
						if(settings.tiptype==2){
							$(this).parent().next().find(".Validform_checktip").removeClass().addClass("Validform_checktip").text($(this).attr("tip"));
						}
						flag=true;
						return true;
					}
					errorobj=$(this);
					$.fn.Validform.sn.showmsg($(this).attr("errormsg")||tipmsg.w,settings.tiptype,{obj:$(this)},"hide"); // 当tiptype=1的情况下,传入"hide"则让提示框不弹出,tiptype=2的情况下附加参数“hide”不起作用;
				}else{
					if($(this).attr("ajaxurl")){
						var inputobj=$(this);
						inputobj.attr("valid",tipmsg.c);
						$.fn.Validform.sn.showmsg(tipmsg.c,settings.tiptype,{obj:inputobj,type:1},"hide");
						$.ajax({
							type: "POST",
							url: inputobj.attr("ajaxurl"),
							data: "param="+$(this).val(),
							dataType: "Json",
							success: function(data){
								if(data.Data=="success"){
									inputobj.attr("valid","true");
									$.fn.Validform.sn.showmsg(tipmsg.r,settings.tiptype,{obj:inputobj,type:2},"hide");
								}else{
									inputobj.attr("valid",data.Message);
									errorobj=inputobj;
									$.fn.Validform.sn.showmsg(data.Message,settings.tiptype,{obj:inputobj});
								}
							}
						});
					}else{
						errorobj=null;
						$.fn.Validform.sn.showmsg(tipmsg.r,settings.tiptype,{obj:$(this),type:2},"hide");
					}
				}
				
			});
			
			// subform
			var subform=function(){
				var flag=true;
				if(posting){return false;}
				
				$this.find("[datatype]").each(function(){
					flag=$.fn.Validform.sn.checkform($(this),$this,settings.tiptype);

					if(!flag){
						errorobj.focus();
						return false;
					}
					
					if(typeof(flag)!="boolean"){
						flag=true;
						return true;
					}
					
					flag=$.fn.Validform.sn.regcheck($(this).attr("datatype"),$(this).val());
					
					if(!flag){
						if($(this).attr("ignore")==="ignore" && ( $(this).val()==="" || $(this).val()===$(this).attr("tip") )){
							flag=true;
							return true;
						}
						errorobj=$(this);
						errorobj.focus();
						$.fn.Validform.sn.showmsg($(this).attr("errormsg")||tipmsg.w,settings.tiptype,{obj:$(this)});
						return false;
					}
					
					if($(this).attr("ajaxurl")){
						if($(this).attr("valid")!="true"){
							flag=false;
							var thisobj=$(this);
							errorobj=thisobj;
							errorobj.focus();
							$.fn.Validform.sn.showmsg(thisobj.attr("valid") || tipmsg.v,settings.tiptype,{obj:thisobj});
							if(!msghidden || settings.tiptype==2){
								setTimeout(function(){
									thisobj.trigger("blur");
								},2000);
							}
							return false;
						}else{
							$.fn.Validform.sn.showmsg(tipmsg.r,settings.tiptype,{obj:$(this),type:2},"hide");
							flag=true;
						}
					}
				});
				
				if(flag && !posting){
					errorobj=null;
					if(settings.postonce){posting=true;}
					if(settings.ajaxPost){
						$.fn.Validform.sn.showmsg(tipmsg.p,settings.tiptype,{obj:$(this)},"alwaysshow");// 传入“alwaysshow”则让提示框不管当前tiptye为1还是2都弹出;
						$.ajax({
							type: "POST",
							dataType:"json",
							url: $this.attr("action"),
							data: $this.serialize(),
							success: function(data){
								$.fn.Validform.sn.showmsg(data.info,settings.tiptype,{obj:$(this)},"alwaysshow");
								(settings.callback)(data);
							}
						});
						return false;
					}else{
						if(settings.is_submit){
						$this.get(0).submit();
						}
					}
				}
				
			};
			
			settings.btnSubmit && $this.find(settings.btnSubmit).bind("click",subform);
			$this.submit(function(){
				subform();
				return false;
			});
		});
		
		// 预创建pop box;
		if(settings.tiptype!=2 || settings.ajaxurl){		
			creatMsgbox();
		}
		
	};
	
	$.fn.Validform.sn={
		defaults:{
			tiptype:1,
            ajaxPost:false,
            is_submit:true
            
		},
		
		regcheck:function(type,gets){
			if(type.indexOf(' ')!=-1){// 多类型验证
				var types = type.split(' ');
				for (var t in types){
					if(arguments.callee.call(this,types[t],gets)){
						continue;
					}else{
						return false;
					}
				}
				return true;
			}else{
				var reg;
				switch(type){
				case "*":
					return true;
				case "k":
					reg= /^[0-9]{1}(\.[0-9]{1,2}){0,1}$/;
					return reg.test(gets);
				case "personname":
					var reg=/^[a-zA-Z0-9\x00-\xff]+/g;
					return reg.test(gets);
				case "chinese":
					var reg=/[^\x00-\xff]/g;
					return reg.test(gets);
				case "notnull":
					reg= /(^\s*)|(\s*$)/g;
					if(!gets)
						return false;
					gets = gets.replace(reg,'');
					return gets.length? true : false ;
				case "positiveinteger": /* 0和正整数 */
					reg= /^[0-9]{1,11}$/;
					return reg.test(gets);
				case "positivenumber":/* 正数 */
					reg=/^[1-9]{0,1}[0-9](\.[0-9]{1,2}){0,1}$/;
					return reg.test(gets);
				case "channelname": /* 频道名称 */
					reg1= /^[a-z0-9][a-z0-9]*:\/\/[a-z0-9][-a-z0-9_]*(\.[a-z0-9][-_a-z0-9]*){1,}$/;
					reg2= /^[a-z0-9][a-z0-9]*:\/\/[*]\.[a-z0-9][-a-z0-9]*(\.[a-z0-9][-a-z0-9]*){1,}$/;
					return reg1.test(gets)||reg2.test(gets);
				case "email": /* 邮箱 */
					var emails=gets.split(",");
					reg = /^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$/;
					for(var key in emails){
						if(!reg.test(emails[key])){
							return false;
						}
					}
					return true;
				case "sms": /* 手机验证 */
					var sms=gets.split(",");
					reg= /^[0-9]{11}$/;
					for(var key in sms){
						if(!reg.test(sms[key])){
							return false;
						}
					}
					return true;
				case "isp_hold": /* isp分配比例 */
					var isp=gets.split(":");
					var isps = 0.0;
					reg = /^((\d+)(?:\.\d+)?:){4,4}((\d+)(?:\.\d+)?)$/;
					if(!reg.test(gets)) {
						return false;
					}
					for(var key in isp){
						isps= isps+parseFloat(isp[key]);
					}
					if(isps<=0) {
						return false;
					}
					return true;
				default:
					return false;
				}
			}
		},
		
		showmsg:function(msg,type,o,show){// o:{obj:当前对象, type:1=>正在检测 |
											// 2=>通过},
											// show用来判断tiptype=1的情况下是否弹出信息框;
			if(errorobj){errorobj.addClass("Validform_error");}
			
			if(type==1 || show=="alwaysshow"){
				msgobj.find(".Validform_info").text(msg);
			}

			if(type==1 && show!="hide" || show=="alwaysshow"){
				msghidden=false;
				msgobj.find(".iframe").css("height",msgobj.height());
				var left=($(window).width()-msgobj.width())/2;
				var top=($(window).height()-msgobj.height())/2;
				top=(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+(top>0?top:0);
				msgobj.css({
					"left":left
				}).show().animate({
					top:top
				},100);
			}
			
			if(type==2){
				if(o.type){
					switch(o.type){
						case 1:// 正在检测;
							o.obj.parent().next().find(".Validform_checktip").removeClass().addClass("Validform_checktip Validform_loading").text(msg);
							break;
						case 2:// 检测通过;
							o.obj.parent().next().find(".Validform_checktip").removeClass().addClass("Validform_checktip Validform_right").text(msg);	
					}
				}else{
					o.obj.parent().next().find(".Validform_checktip").removeClass().addClass("Validform_wrong Validform_checktip").text(msg);
				}
			}
			
		},
		
		checkform:function(obj,parentobj,tiptype,show){// show用来判断是表达提交还是blur事件引发的检测;
			var errormsg=obj.attr("errormsg") || tipmsg.w;
			
			if(obj.is("[datatype='radio']")){  // 判断radio表单元素;
				var inputname=obj.attr("name");
				var radiovalue=parentobj.find(":radio[name="+inputname+"]:checked").val();
				if(!radiovalue){
					errorobj=obj;
					this.showmsg(errormsg,tiptype,{obj:obj},show);
					return false;
				}
				errorobj=null;
				this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
				return "radio";
			}

			if(obj.is("[datatype='checkbox']")){  // 判断checkbox表单元素;
				var inputname=obj.attr("name");
				var checkboxvalue=parentobj.find(":checkbox[name="+inputname+"]:checked").val();
				if(!checkboxvalue){
					errorobj=obj;
					this.showmsg(errormsg,tiptype,{obj:obj},show);
					return false;
				}
				errorobj=null;
				this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
				return "checkbox";
			}

			if(obj.is("[datatype='select']")){  // 判断select表单元素;
				if(!obj.val()){
				  errorobj=obj;
				  this.showmsg(errormsg,tiptype,{obj:obj},show);
				  return false;
				}
				errorobj=null;
				this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
				return "select";
			}
			
			var defaultvalue=obj.attr("tip");
			if((obj.val()==="" || obj.val()===defaultvalue) && obj.attr("ignore")!="ignore"){
				errorobj=obj;
				this.showmsg(obj.attr("nullmsg") || tipmsg.s,tiptype,{obj:obj},show);
				return false;
			}
			
			if(obj.attr("recheck")){
				var theother=parentobj.find("input[name="+obj.attr("recheck")+"]:first");
				if(obj.val()!=theother.val()){
					errorobj=obj;
					this.showmsg(errormsg,tiptype,{obj:obj},show);
					return false;
				}
			}
			if(obj.attr("alternative")){ //二选一
				var theother=parentobj.find("textarea[name="+obj.attr("alternative")+"]:first");
				if(theother.val()==undefined){
					theother=parentobj.find("input[name="+obj.attr("alternative")+"]:first");
				}
				if(theother.val()==""&&obj.val()==""){
					errorobj=obj;
					theother.addClass("Validform_error");
					this.showmsg("二选一必填",tiptype,{obj:obj},show);
					this.showmsg("二选一必填",tiptype,{obj:theother},show);
					return false;
				}
				if(obj.val()!=""){
					this.showmsg(tipmsg.r,tiptype,{obj:theother,type:2},"hide");
					theother.removeClass("Validform_error");
				}
				if(theother.val()!=""){
					this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
				}
			}
			if(obj.attr("greaterthan")){//对比两个数字,它比前一个小
				var theother=parentobj.find("input[name="+obj.attr("greaterthan")+"]:first");
				var thisValue=parseInt(obj.val());
				var otherValue=parseInt(theother.val());
				if(!isNaN(thisValue) && !isNaN(otherValue) && thisValue>=otherValue){// 都是数字,大于时报错
					errorobj=obj;
					this.showmsg("要小于上限",tiptype,{obj:obj},show);
					return false;
				}else if(!isNaN(thisValue) && !isNaN(otherValue) && thisValue<otherValue){
					this.showmsg(tipmsg.r,tiptype,{obj:theother,type:2},"hide");
					this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
					obj.removeClass("Validform_error");
					theother.removeClass("Validform_error");
				}
				
			}
			if(obj.attr("lessthan")){  //对比两个数字,它比前一个大
				var theother=parentobj.find("input[name="+obj.attr("lessthan")+"]:first");
				var thisValue=parseInt(obj.val());
				var otherValue=parseInt(theother.val());
				if(!isNaN(thisValue) && !isNaN(otherValue) && thisValue<=otherValue){// 都是数字,小于时报错
					errorobj=obj;
					this.showmsg("要大于下限",tiptype,{obj:obj},show);
					return false;
				}else if(!isNaN(thisValue) && !isNaN(otherValue) && thisValue>otherValue){
					this.showmsg(tipmsg.r,tiptype,{obj:theother,type:2},"hide");
					this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
					obj.removeClass("Validform_error");
					theother.removeClass("Validform_error");
				}
				
			}
			
			if(obj.attr("greatertime")){  //对比两个日期,它比前一个大
				var theother=parentobj.find("input[name="+obj.attr("greatertime")+"]:first");
				var thisValue=StrToTime(obj.val());
				var otherValue=StrToTime(theother.val());
		        
				if( thisValue<otherValue){
					errorobj=obj;
					this.showmsg("要大于",tiptype,{obj:obj},show);
					alert("开始时间要大于结束时间");
					return false;
				}else if(thisValue>=otherValue){
					this.showmsg(tipmsg.r,tiptype,{obj:theother,type:2},"hide");
					this.showmsg(tipmsg.r,tiptype,{obj:obj,type:2},"hide");
					obj.removeClass("Validform_error");
					theother.removeClass("Validform_error");
				}
				
			}
			
			obj.removeClass("Validform_error");
			errorobj=null;
			return true;
		}
		
	};
	function StrToTime(thisValue){
		 var arys= thisValue.split('-');     
         var d = new Date(arys[0], parseInt(arys[1])-1, arys[2]);   
         return  d.getTime();    
	}
	// 公用方法显示&关闭信息提示框;
	$.Showmsg=function(msg){
		creatMsgbox();
		$.fn.Validform.sn.showmsg(msg,1);
	};
	$.Hidemsg=function(){
		msgobj.hide();
		msghidden=true;
	};

})(jQuery);

 

     css:

* {
	margin: 0;
	padding: 0;
}

input,select,textarea {
	font-size: 1em;
	margin: 0;
	color: #000;
	font-family: tahoma, arial, simsun, sans-serif;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

:focus {
	outline: none;
}

body {
	font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
/* registerform */
.registerform .need {
	width: 10px;
	color: #b20202;
}

.registerform td {
	padding: 5px 0;
	vertical-align: top;
	text-align: left;
}

.registerform .inputxt,.registerform textarea {
	border: 1px solid #a5aeb6;
	width: 196px;
	padding: 2px;
}

.registerform textarea {
	height: 75px;
}

.registerform label {
	margin: 0 26px 0 10px;
}

.registerform .tip {
	line-height: 20px;
	color: #5f6a72;
}

.registerform select {
	width: 202px;
}

.registerformalter select {
	width: 124px;
}
/*==========以下部分是必须的===========*/
.Validform_checktip {
	margin-left: 8px;
	line-height: 20px;
	height: 20px;
	overflow: hidden;
	color: #999;
	font-size: 12px;
}

.Validform_right {
	color: #71b83d;
	padding-left: 20px;
	background: url(../images/right.png) no-repeat left center;
}

.Validform_wrong {
	color: red;
	padding-left: 20px;
	white-space: nowrap;
	background: url(../images/error.png) no-repeat left center;
}

.Validform_loading {
	padding-left: 20px;
	background: url(../images/onLoad.gif) no-repeat left center;
}

.Validform_error {
	background-color: #ffe7e7;
}

#Validform_msg {
	color: #7d8289;
	font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
	width: 280px;
	background: #fff;
	position: absolute;
	top: 0px;
	right: 50px;
	z-index: 99999;
	display: none;
	filter: progid :   DXImageTransform.Microsoft.Shadow (   Strength =   3,
		Direction =   135, Color =   '#999999' );
	-webkit-box-shadow: 2px 2px 3px #aaa;
	-moz-box-shadow: 2px 2px 3px #aaa;
}

#Validform_msg .iframe {
	position: absolute;
	left: 0px;
	top: -1px;
	z-index: -1;
}

#Validform_msg .Validform_title {
	line-height: 25px;
	height: 25px;
	text-align: left;
	font-weight: bold;
	padding: 0 8px;
	color: #fff;
	position: relative;
	background-color: #000;
}

#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited
	{
	line-height: 22px;
	position: absolute;
	right: 8px;
	top: 0px;
	color: #fff;
	text-decoration: none;
}

#Validform_msg a.Validform_close:hover {
	color: #cc0;
}

#Validform_msg .Validform_info {
	padding: 8px;
	border: 1px solid #000;
	border-top: none;
	text-align: left;
}

    jsp

  

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags/form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script src="resources/jquery/1.10.2/jquery.json-2.4.js"></script>
<script class="jsbin"
	src="resources/jquery/1.10.2/jquery.dataTables.nightly.js"></script>
<script class="jsbin"
	src="resources/jquery/1.10.2/jquery.dataTables.nightly.js"></script>
<style type="text/css" title="currentStyle">
@import "${projectPath}/resources/datatables/css/demo_page.css";

@import "${projectPath}/resources/datatables/css/demo_table.css";

@import "${projectPath}/resources/datatables/css/demo_table_jui.css";
</style>
<script type="text/javascript"
	src="resources/tableValidation/tableValid.js"></script>
<script type="text/javascript">
	$(function() {
		$(".aa:last").Validform({
			tiptype : 2,
			callback : function(data) {
				if (data.status == "y") {
					setTimeout(function() {
						$.Hidemsg();
					}, 2000);
				}
			}
		});
	})
</script>
<style type="text/css">
@import "${projectPath}/resources/tableValidation/valid.css";
</style>
<script type="text/javascript">
	
</script>
<div class="container">
	<s:form action="addchannelbandwidthalarm" method="post"
		modelAttribute="channelalarm" class="aa">
		<div class="row">
			<table id="add" class="table table-hover"
				style="margin-left: auto; margin-right: auto; width: auto;">
				<tr>
					<td>频道名称:</td>
					<td><s:input path="channelname" class="form-control"
							placeholder="频道请从rcms中复制" datatype="channelname"
							nullmsg="请输入频道名称" errormsg="请在rcms中复制" /> <c:out
							value="${channelnameerror}"></c:out>
					</td>
					<td><div class="Validform_checktip">请输入频道名称</div>
					</td>
				</tr>
				<tr>
					<td>告警上限:</td>
					<td><s:input path="uplimit" class="form-control"
							placeholder="单位(MB)" datatype="positiveinteger" nullmsg="请输入告警上限"
							errormsg="请输入正整数" /></td>
					<td><div class="Validform_checktip">请输入正整数</div>
					</td>
				</tr>
				<tr>
					<td>告警下限:</td>
					<td><s:input path="downlimit" class="form-control"
							placeholder="单位(MB)" datatype="*" greaterthan="uplimit"
						    nullmsg="请输入告警下限" errormsg="请输入正整数,并小于上限" />
					</td>
					<td><div class="Validform_checktip">请输入正整数</div>
					</td>
				</tr>
				<tr>
					<td>延迟时间:</td>
					<td><s:select path="delay_time" class="form-control">
							<s:option value="5" label="5分钟" />
							<s:option value="10" label="10分钟" />
							<s:option value="15" label="15分钟" />
							<s:option value="30" label="30分钟" selected="selected" />
							<s:option value="45" label="45分钟" />
							<s:option value="60" label="60分钟" />
							<s:option value="120" label="2小时" />
						</s:select></td>
					<td><div class="Validform_checktip">延迟时间内有超量不会告警</div>
					</td>
				</tr>
				<tr>
					<td>告警间隔:</td>
					<td><s:select path="send_num" class="form-control">
							<s:option value="1" label="5分钟" />
							<s:option value="2" label="10分钟" />
							<s:option value="3" label="15分钟" />
							<s:option value="6" label="30分钟" />
							<s:option value="9" label="45分钟" />
							<s:option value="12" label="60分钟" />
							<s:option value="24" label="2小时" />
							<s:option value="120" label="12小时" />
						</s:select></td>
					<td><div class="Validform_checktip">持续达到告警值的告警间隔</div>
					</td>
				</tr>
				<tr>
					<td>客户邮箱:</td>
					<td><s:textarea class="form-control" rows="3" path="email"
							datatype="email" nullmsg="请输入email" errormsg="email格式错误" /></td>
					<td><div class="Validform_checktip">多个地址以英文逗号分隔</div>
					</td>
				</tr>
				<tr>
					<td>客户手机:</td>
					<td><s:textarea class="form-control" rows="3" path="sms"
							datatype="sms" nullmsg="请输入手机号" errormsg="格式错误" /></td>
					<td><div class="Validform_checktip">多个号码以英文逗号分隔</div>
					</td>
				</tr>
				<tr>
					<td>是否可用:</td>
					<td><s:select path="enable" class="form-control">
							<s:option value="0" label="可用" />
							<s:option value="1" label="不可用" />
						</s:select></td>
					<td><div class="Validform_checktip">是否生效</div>
					</td>
				</tr>
				<tr>
					<td><input type="submit" class="btn btn-default " value="提交" />
					</td>
					<td><a class="btn btn-default btn-sm" role="button"
						href="${pageContext.request.contextPath}/channelbandwidthalarm"
						title="返回">返回</a>
					</td>
					<td></td>
				</tr>
			</table>
		</div>
	</s:form>
</div>

 

分享到:
评论

相关推荐

    超好用的验证框架 封装js

    描述中提到这是一个“很好用”的前台验证框架,意味着该框架可能具有易用性、高效性和灵活性等特点。它是作者个人编写的,这意味着它可能具有一定的独特性和个性化解决方案。作者谦虚地表示如果有不足之处,希望得到...

    Javascript前台简单验证插件2

    10. **库和框架集成**:现代前端开发中,经常使用jQuery、Vue.js、React等库或框架。好的验证插件应能够方便地与这些库集成,提供API或指令供开发者调用。 综上所述,"Javascript前台简单验证插件2"可能涵盖了以上...

    基于Java的国产前台框架

    【标题】:“基于Java的国产前台框架” 在Java开发领域,前端框架的选择通常是构建高效、易维护Web应用的关键。本文将深入探讨一个国产的前端框架——DWZ(Dynamic Web Zone),它是一个专为Java开发设计的高效、轻...

    INSPINIA 前台框架汉化版

    INSPINIA是一款基于Bootstrap框架的现代化、响应式和轻量级的前台框架,专为构建功能丰富的中文后台管理系统而设计。它提供了大量的预建组件和示例,可以帮助开发者快速搭建用户界面,节省时间和精力。以下是对这款...

    rapid_validation_1.5.1网页前台验证jquery插件

    此插件不仅支持jQuery库,还能够与使用Prototype核心的项目无缝集成,这意味着开发者无需担心框架冲突问题,可以轻松地将验证功能引入现有的项目中。这在实际开发环境中显得尤为关键,因为许多网站和应用已经基于...

    EHT快速开发及集成平台框架

    ### EHT快速开发及集成平台框架知识点解析 #### 一、EHT框架概述 EHT快速开发及集成应用平台框架,是一款专为提高软件开发效率而设计的开发框架。它通过对常用的API函数与UI组件进行封装,使得开发者能够更加便捷地...

    net开发框架(mvc)

    与SQL Server 2008数据库集成是.NET MVC应用的常见需求。开发者可以使用Entity Framework或ADO.NET等数据访问技术来与数据库进行交互。SQL Server 2008提供了强大的数据存储和管理功能,支持事务处理、备份恢复、...

    C# mvc框架创建文档 基于bootstrap前端框架

    从提供的文件内容中,...以上知识点涵盖了从搭建MVC框架项目、配置日志、集成Bootstrap前端框架、选择合适的第三方库等方面的知识,帮助开发者理解和掌握如何利用现有的框架和工具快速搭建一个功能完备的web应用程序。

    信息系统后台框架

    【web系统后台】标签表明这个框架专注于构建基于Web的应用程序,通常包括但不限于登录验证、数据管理、API接口、权限控制等功能。Web后台框架往往需要与前端框架(如Vue.js, React或Angular)协同工作,以实现前后端...

    基于ruoyi框架web前端开发电商系统用例

    这个框架旨在提升开发效率,特别是对于那些熟悉Java背景的开发者,它提供了后端接口与前端UI的快速集成方案。 Vue.js是一个轻量级的渐进式JavaScript框架,被广泛用于构建用户界面。它的核心库专注于视图层,易于...

    使用SSH框架实现简单用户管理

    在IT行业中,SSH框架是Java Web开发中常用的一个集成框架,它由SpringMVC、Spring和Hibernate三个组件组成。这个框架组合提供了强大的功能,能够帮助开发者高效地构建复杂的Web应用程序,尤其是在用户管理方面。下面...

    基于SSM框架的旅游门户网站:包括前台模块、后台模块。该系统的前台模块主要包括在线预定.zip

    同时,为了保证数据安全,需实现用户身份验证、数据加密传输等安全措施。 在后台模块,主要负责管理旅游产品的发布、更新、库存控制以及订单处理等业务逻辑。开发者可以使用Spring的AOP(面向切面编程)来实现权限...

    SSM框架搭建实例

    这个框架的集成使得开发者能够充分利用各自的优势,构建出高效、可维护性高的企业级应用。在这个"SSM框架搭建实例"中,我们可以深入理解这三个组件如何协同工作。 首先,Spring框架作为整个应用的核心,提供了依赖...

    一套通用的Easyui+asp.net mvc开发框架源码

    asp.net MVC5框架通常与Entity Framework集成,允许开发者通过简单的代码进行数据库操作。结合Easyui,开发者可以快速构建出具有强大后台逻辑和美观前台界面的Web应用。 在开发过程中,asp.net MVC5提供了一套完整...

    ssm 开发的商城前台页面

    在这个项目中,“ssm 开发的商城前台页面”指的是使用SSM框架设计和实现的一个电子商务网站的用户界面部分。下面将详细阐述SSM框架以及在开发商城前台页面时涉及到的关键技术点。 首先,Spring是整个框架的核心,它...

    结合SpringMVC和Hibernate-validator,自动生成前台的js验证代码.pdf

    在本文档中,我们将探讨如何结合SpringMVC和Hibernate-validator框架,自动生成前端JavaScript验证代码,从而简化开发过程,提高代码复用性,并确保前后端验证规则的一致性。 首先,我们了解到,虽然Hibernate-...

    一个完整的WEB表单验证程序

    通过集成的验证库或框架,开发者可以快速实现各种常见的验证规则,如非空检查、邮箱格式验证、手机号码验证等,同时还能自定义复杂的验证逻辑。 【标签】:“javascript,表单” JavaScript是实现客户端表单验证的...

    结合SpringMVC和Hibernate-validator,自动生成前台的js验证代码.docx

    Hibernate-validator是一个强大的校验框架,它可以方便地集成到SpringMVC中,用于验证模型对象的属性。在后台验证过程中,我们通常会为模型属性定义相应的校验注解,如`@NotEmpty`、`@Email`等。 然而,前端验证...

    考试类精品--大三下学期的小组课程设计项目,后台使用了SpringBoot的框架,前台使用Vue框架搭建的一个在线考.zip

    在在线考试系统中,这可能涉及到考生登录验证、试题访问权限等安全控制。 4. **自动配置**:SpringBoot的自动配置特性使得开发者无需编写大量配置代码,只需要添加相应的依赖,SpringBoot就会自动配置相应的组件。 ...

    js前台插件集

    在学习和使用这些JS前台插件时,应深入理解它们的工作原理,熟悉API接口和配置选项,以便更好地集成到自己的项目中。同时,不断关注前端技术的发展,学习新的插件和框架,以保持技术的更新和提升。

Global site tag (gtag.js) - Google Analytics