### JQ实现表单校验案例

最新推荐文章于 2022-12-07 08:30:00 发布

无你处、无江湖

最新推荐文章于 2022-12-07 08:30:00 发布

阅读量214

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42675691/article/details/100020463

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

JQ实现表单校验案例

技术分析

trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
triggerHandler : 仅仅只会触发事件所对应的函数
is()

步骤分析

首先给必填项,添加尾部添加一个小红点
获取用户输入的信息,做相应的校验
事件: 获得焦点, 失去焦点, 按键抬起
表单提交的事件

代码实现

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

表单校验.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/style.css" />
		<title></title>
		<!--
			1. 首先给必填项,添加尾部添加一个小红点
			2. 获取用户输入的信息,做相应的校验
			3. 事件: 获得焦点, 失去焦点, 按键抬起
			4. 表单提交的事件
			
			Jq的方式来实现:
				1. 导入JQ的文件
				2. 文档加载事件: 在必填项后天加一个小红点
				3. 表单校验确定事件: blur focus keyup
				4. 提交表单 submit
		-->
		<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; //123
					//清空上一次提示的信息
					$(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(){
//					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){
							$(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");
				});
				
//				$(".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" />
			</div>
			<div>
				密码:<input type="password"  class="bitian" id="password" />
			</div>
			<div>
				手机号:<input type="tel" />
			</div>
			<div>
				<input type="submit" />
			</div>
		</form>
	</body>
</html>

在这里插入图片描述

无你处、无江湖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
### JQ实现表单校验案例

JQ实现表单校验案例技术分析trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为triggerHandler : 仅仅只会触发事件所对应的函数is()步骤分析首先给必填项,添加尾部添加一个小红点获取用户输入的信息,做相应的校验事件: 获得焦点, 失去焦点, 按键抬起表单提交的事件代码实现style.cssbody { font:...
复制链接

扫一扫

专栏目录