JQuery_03

表单校验案例：
trigger：触发事件，但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
triggerHandler：仅仅只会触发事件所对应的函数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	作者：offline
        	时间：2018-11-04
        	描述：
        	1.首先给必填项，添加尾部添加一个小红点
        	2.获取
        	
        	Jq的方式来实现：
        	1，导入JQ的文件
        	2.文档加载事件：在必填项后面加一个小红点
        	3.表单校验确定事件：blur focus keyup
        	4.提交表单submit
        -->
        <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <link rel="stylesheet" href="../css/style.css" />
        <script>
        	$(function(){
        		 //在必填项后面加一个小红点
        		 $(".bitian").after("<font class='high'>*</font>");
        		 //事件绑定
        		 $(".bitian").blur(function(){
        		 	//获得当前时间是谁的
        		 	//var value=this.value;
        		 	var value = $(this).val();
        		 	$(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");
        		 });
        		 
        		 //给表单绑定提交事件
        		 $("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="submit"/>
			</div>
		</form>
	</body>
</html>
猜你喜欢
