8.3 表单校验

最新推荐文章于 2025-07-05 10:00:00 发布

P_ning

最新推荐文章于 2025-07-05 10:00:00 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/99575171

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了一个使用jQuery实现的表单验证实例，包括给必填项添加视觉提示、实时反馈输入合法性、处理表单提交前的验证等功能，确保用户输入有效数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.f{
				color: red;
			}
			.right{
				background: #FF0000;
				color: #FFEBCD;
			}
			.false{
				background: #FFEBCD;
				color: #FF0000;
			}
		</style>
		<script src="../../js库/jquery-2.1.0.js"></script>
		<script>
			/*
				要求:	1.给必填项的尾部加一个红色的*号
						2.用户输入的信息能够获得相应的检验
						3.事件有:获得焦点,失去焦点,案件抬起
						4.表单提交事件
				
			*/
			$(function(){
			//类为must的标签后面加上红色的*号
				$(".must").after("<front class='f'>*</front>");
			//给id为must的输入栏绑定一个事件
				$(".must").blur(function(){									
					var a = $(this).val();//获取当前输入栏的值,JS的的获取var a = this.value;
				//清空上一次判断所添加的span
					$(this).parent().find("span").remove();					
				//判断this是哪个输入栏
					if($(this).is("#username")){
						//校验用户名
							if(a.length>6){
								$(this).parent().append("<span class='right'>用户名长度可用</span>");
							}else{
								$(this).parent().append("<span class='false'>用户名长度不合法</span>");
							}
					}
					if($(this).is("#passworld")){
						//校验密码
							if(a.length>10){
								$(this).parent().append("<span class='right'>密码长度可用</span>");
							}else{
								$(this).parent().append("<span class='false'>密码长度不合法</span>");
							}
					}
				}).focus(function(){
					$(this).triggerHandler("blur");
				}).keyup(function(){
					$(this).triggerHandler("blur");
				});				//$(".must").blur(function(){}).focus(function(){}).keyup(function(){})//列式调用(并列),在返回值为js对象时可以使用,并且一般和triggerHandler一起使用更方便	
							
			//	提交事件,防止用户没填直接点提交,导致提交一个空的信息给服务器,占用资源
				$("form").submit(function(){
					$(".must").trigger("blur");//$(".must").triggerHandler("blur");//不会产生点击效果,只会触发jq的第一个元素的事件
					
					var b = $(".false").length;//通过判断类名为false的个数,从而来判断输入栏是否全部正确
					if(b>0){
						return false;
					}
					if(b<0 || b==0){
						return true;
					}
					
				})
			});
		</script>
	</head>
	<body>
		<!--在点击提交按钮后,自动将所有的事件过一遍,不需要每次都去点击一下获取焦点才能进行focus事件-->
		<form>
			<div>
					用户名:<input type="text" class="must" id="username"/><!--必填-->
			</div>
			<div>
				密码:<input type="password" class="must" id="passworld"/><!--必填-->
			</div>
			<div>
				手机号码:<input type="tel"/>
			</div>
			<div>
				<input type="submit" value="提交"/>
			</div>
		</form>
		
	</body>
</html>