boostrap方式完成表单校验

最新推荐文章于 2022-07-25 17:18:43 发布

万万没想到2022

最新推荐文章于 2022-07-25 17:18:43 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/w2019424/article/details/97148549

版权

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
	<script>

		$(function(){
			//默认做一些页面初始化
			//动态在必填项后面添加小红点
			$(".bitian").after("<font class='high'>*</font>");
			
			//给必填项绑定事件
			$(".bitian").blur(function(){
				//首先获取用户当前输入的值
				var value = this.value;
				
				//清空上一次提示的信息
				$(this).parent().find(".formtips").remove();
				
				//判断当前的值是哪一项输入的值
				if($(this).is("#username")){ //判断是否是用户名输入项
					if(value.length < 6){
						$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
					}else{
						$(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>");
					}
				}
				if($(this).is("#password")){ //判断是否是密码输入项
					if(value.length < 6){
						$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
					}else{
						$(this).parent().append("<span class='formtips onSuccess'>密码可用</span>");
					}
				}
			}).focus(function(){
				$(this).triggerHandler("blur");
			}).keyup(function(){
				$(this).triggerHandler("blur");
			})
			
			
			//给表单提交绑定事件
			$("form").submit(function(){
				
				//触发所有必填项的校验
				$(".bitian").trigger("focus");
				//找到错误信息的个数
				if($(".onError").length > 0){
					return false;
				}
				
				return true;
			});
		});
		
		
		
		
		/*	$(function(){
			//在所有必填项后添加一个小红点*
			$(".bitian").after("<font class='high'>*</font>");
			
			//事件绑定
			$(".bitian").blur(function(){
				//获得当前事件是谁的
		//		alert(this.value);
		//		var value = this.value;
				var value = $(this).val();
				
				//清空当前必填项后面的span
				//$(".formtips").remove();
				$(this).parent().find(".formtips").remove();
				
				//获得当前事件是谁的
				if($(this).is("#username")){
					//校验用户名
					if(value.length < 6){
						$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
					}else{
						$(this).parent().append("<span class='formtips onSuccess'>用户名可用</span>");

					}
				}
				if($(this).is("#password")){
					//校验密码
					if(value.length < 3){
					
					}else{
					
					}
				}
				
			}).focus(function(){
				$(this).triggerHandler("blur");
			}).keyup(function(){
				$(this).triggerHandler("blur");
			});
			
//				$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

			//给表单绑定提交事件
			$("form").submit(function(){
				//触发必填项的校验逻辑
				$(".bitian").trigger("focus");
				
				var length = $(".onError").length
				if(length > 0){
					return false;
				}
				return true;
			});
		});*/
	</script>
</head>
<body>
	<form action="index.html">
		<div>
			用户名：<input type="text" class="bitian" id="username" />
			<font class="high">*</font>
			<span class="formtips onError">用户名太短了</span>
		</div>
		<div>
			密　码：<input type="password" class="bitian" id="password" />
			<font class="high">*</font>
			<span class="formtips onError">密码太短了</span>
		</div>
		<div>
			手机号：<input type="tel" />
		</div>
		<div>
			<input type="submit" />
		</div>
	</form>
</body>
</html>

style.css:

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}


  /*div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
  }
 div.mini { 
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
  }
 div.hide { 
display:none;
  }*/


table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}

万万没想到2022

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostrap方式完成表单校验

代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/style.css" /> <script type="text/javascript...
复制链接

扫一扫