jquery实现简单的数据校验

最新推荐文章于 2022-11-20 23:42:24 发布

有趣的杰克

最新推荐文章于 2022-11-20 23:42:24 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/weixin_42731928/article/details/85164139

版权

适合有一定js，jquery基础的学习，主要知识点为dom节点操作，一些常用函数，链式调用，学习jquery要多查询API文档，不了解的函数就去文档里搜索。

<head>
	<meta charset="UTF-8">
	<title></title>
	<!--
		1. 首先给必填项,添加尾部添加一个小红点
		2. 获取用户输入的信息,做相应的校验
		3. 事件: 获得焦点, 失去焦点, 按键抬起
		4. 表单提交的事件
		
		Jq的方式来实现:
			1. 导入JQ的文件
			2. 文档加载事件: 在必填项后天加一个小红点
			3. 表单校验确定事件: blur focus keyup
			4. 提交表单 submit
	-->
	<script src="js/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		//当文档加载完成时自动调用
		$(function() {
			//在必填项后面加一个红点
			//after() 方法在被选元素后插入指定的内容。
			$(".bitian").after("<span style='color: red'>*</span>");
			
			//当元素失去焦点时发生 blur 事件。
			$(".bitian").blur(function() {
				//获取用户输入的值
				var value = $(this).val();
				//清空上一次提示的信息，链式调用
				$(this).parent().find(".wo").remove();
				//判断当前的值是哪一项输入的值  
				//is()方法用于判断与当前jQuery对象相匹配的元素是否符合指定的表达式。
				//表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数。
				if($(this).is("#username")) { //可选判断$(this).attr("id") == "username"
					if(value.length < 6) {
						//在当前节点的父节点，也就是div中追加一个span标签
						$(this).parent().append("<span class='wo error'>用户名太短</span>");
					} else {
						$(this).parent().append("<span class='wo'>用户名合格</span>");
					}
				}
				if($(this).is("#password")) { //判断是否是用户名输入项
					if(value.length < 3) {
						//在当前节点的父节点，也就是div中追加一个span标签
						$(this).parent().append("<span class='wo error'>密码太短</span>");
					} else {
						$(this).parent().append("<span class='wo'>密码合格</span>");
					}
				}
			}).focus(function(){
				//触发鼠标移开事件blur()
				//triggerHandler用来触发事件
				$(this).triggerHandler("blur");
			}).keyup(function(){
				$(this).triggerHandler("blur");
			})
					//给表单提交绑定事件
			$("form").submit(function(){
				//触发所有必填项的校验
				$(".bitian").trigger("blur");
				//找到错误信息的个数
				if($(".error").length > 0){
					return false;
				}
				return true;
			});

		})
	
			
		
	</script>
</head>

<body>
	<form action="js.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>

有趣的杰克

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery实现简单的数据校验

适合有一定js，jquery基础的学习，主要知识点为dom节点操作，一些常用函数，链式调用，学习jquery要多查询API文档，不了解的函数就去文档里搜索。&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!-- 1. 首先给必填项,添加尾部添加一个小红点 2. 获取用户输入的信息,...
复制链接

扫一扫