表单提醒

最新推荐文章于 2021-06-23 23:50:49 发布

Q_004

最新推荐文章于 2021-06-23 23:50:49 发布

阅读量234

点赞数

分类专栏： jq 文章标签：自定义属性 jq

本文链接：https://blog.csdn.net/q_004/article/details/78464598

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自定义属性用于表单提醒

用方法控制提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一组表单提醒</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("form input").blur(function(){
					var obj=$(this);
					var val=obj.val();
					var reg=obj.attr("reg");
					var tip=obj.attr("tip");
					var regobj=new RegExp(reg);
					if(!regobj.test(val)){
						var spanobj=obj.next();
						spanobj.html("<font color=red>"+tip+"</font>");
					}else{
						var spanobj=obj.next();
						spanobj.html("");
					}
					
				})
				$("#regist").click(function(){
				//设置一个标志位
				var isSubmit=true;
				$("form input").each(function(){
					var obj=$(this);
				    var reg=obj.attr("reg");
				    var tip=obj.attr("tip");
				    var val=obj.val();
				    var regobj=new RegExp(reg);
				    if(!regobj.test(val)){
					    var spanobj=obj.next();
					    spanobj.html("<font color='#FF0000'>"+tip+"</font>");
					    isSubmit=false;
				    }else{
					    var spanobj=obj.next();
					    spanobj.html("");
				    }
				})
				if(isSubmit){
					//表单提交
					$("#myform").submit();
				}
				
			  })	
			})
			
		</script>
	</head>
	<body>
		<form id="myform" action="${pash}/demo.asp" method="post">
			<p>用户名：<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
			<p>密码：<input type="password" reg="^\w{5,8}$" tip="请输入5到8位数字,字母或_" /><span></span></p>
			<p>用户名：<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
			<p><input id="regist" type="button" value="提交" /></p>
		</form>
		
	</body>
</html>







用事件控制提交
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一组表单提醒</title>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				$("form input").blur(function(){
					var obj=$(this);
					var val=obj.val();
					var reg=obj.attr("reg");
					var tip=obj.attr("tip");
					var regobj=new RegExp(reg);
					if(!regobj.test(val)){
						var spanobj=obj.next();
						spanobj.html("<font color=red>"+tip+"</font>");
					}else{
						var spanobj=obj.next();
						spanobj.html("");
					}
					
				})
//				$("#regist").click(function(){
//				//设置一个标志位
//				var isSubmit=true;
//				  $("form input").each(function(){
//					 var obj=$(this);
//				     var reg=obj.attr("reg");
//				     var tip=obj.attr("tip");
//				     var val=obj.val();
//				     var regobj=new RegExp(reg);
//				     if(!regobj.test(val)){
//					    var spanobj=obj.next();
//					    spanobj.html("<font color='#FF0000'>"+tip+"</font>");
//					    isSubmit=false;
//				    }else{
//					    var spanobj=obj.next();
//					    spanobj.html("");
//				    }
//				})
//				if(isSubmit){
//					//表单提交
//					$("#myform").submit();
//				}
//				
//			  })
			$("#myform").submit(function(){
				var isSubmit=true;
				$("form input").each(function(){
					 var obj=$(this);
				     var reg=obj.attr("reg");
				     var tip=obj.attr("tip");
				     var val=obj.val();
				     var regobj=new RegExp(reg);
				     if(!regobj.test(val)){
					    var spanobj=obj.next();
					    spanobj.html("<font color='#FF0000'>"+tip+"</font>");
					    isSubmit=false;
				    }else{
					    var spanobj=obj.next();
					    spanobj.html("");
				    }
				})
				return isSubmit;
				
			})
			})
			
		</script>
	</head>
	<body>
		<form id="myform" action="${pash}/demo.asp" method="post">
			<p>用户名：<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
			<p>密码：<input type="password" reg="^\w{5,8}$" tip="请输入5到8位数字,字母或_" /><span></span></p>
			<p>用户名：<input type="text" reg="^\d{3,5}$" tip="请输入3到5位数字" /><span></span></p>
			<!--<p><input id="regist" type="button" value="提交" /></p>-->
			<p><input id="regist" type="submit" value="提交" /></p>
		</form>
		
	</body>
</html>