JQuery实现用户验证

最新推荐文章于 2022-11-22 10:34:00 发布

冯浩月

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量5.1k

点赞数

分类专栏： B/S学习 ---JQuery

本文链接：https://blog.csdn.net/m18633778874/article/details/79462982

版权

B/S学习同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

---JQuery

4 篇文章 0 订阅

订阅专栏

前言

Dreamweaver是一款非常实用，编辑HTML、CSS文件的工具，自己使用这款工具完成了jQuery知识的学习，下面小编来分享一下其中的一个实例，用户验证的一个例子，重点是CSS样式与HTML结合和jQuery方法的使用，Tomcat服务器的部分会在之后的AJAX的学习中安装使用。

认识Dreamweaver

一、背景

小编知道有这么一款工具是在学习ASP.NET视频中，当时便安装上了，但是没有用到，这不在这里派上了用场。

二、百度百科

1.简称“DW”，中文名称“梦想编织者”，2005年Adobe公司从美国MACROMEDIA公司收购；

2.作用

集网页制作和管理网站于一身的所见即所得网页代码的编辑器；

3.强大之处

能够利用对HTML、CSS、JavaScript等内容的支持，设计人员和开发人员可以在几乎任何地方快速制作和进行网站建设。

三、使用图

用户验证的例子实现

一、编写HTML代码

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>JQuery实战1-用户名校验</title>
   <link href="css/userVerify.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/userVerify.js"></script>
</head>

<body>
    请输入用户名：<input type="text" id="userName" class="userText"/> <input type="button"  value="校验" id="verifyButton" />
    <div id="result"></div>
</body>
</html>

二、设计CSS样式

.userText{
/*控制文本框 */
   border:1px solid red;
   background-image:url(../images/userVerify.gif);
   background-repeat:repeat-x;
   background-position:bottom;
 
}

三、JQuery实现网页行为

需要进行两件事情，如下：
1.点击button校验时，获取文本框的内容，发送给服务器端，最后接收服务器返回的数据，填充到预留的div中，以便用户看到结果；

2.文本框效果，用户按键后，判断文本框的内容是否为空，若不为空，红色的边框和背景图就取消，否则保留。

   //页面装载后执行的代码
	$(document).ready(function(){
	//button按钮，注册事件
	   $("#verifyButton").click(function(){
		 //获取文本框的值
		 var userName=$("#userName").val();
		 //将内容发送给服务端
			if(userName==""){
				alert("用户名不能为空！");
																	
			}else{
																	
				 //接收服务端的数据，填充到div中
			 	$("#result").html(userName);
																			 
																		
				  }
																
																
		});
		//文本框，注册事件
	    $("#userName").keyup(function(){
															
			var value=$(this).val();
			if(value===""){
			//如果文本框为空，保留红色边框和背景图
			  $(this).addClass("userText");
			}else{
				//如果不为空则去掉边框和背景图
				$(this).removeClass("userText");
				  }
		});
	});

小结

通过这个小例子，我们可以学到一些知识点，HTML负责页面内容，CSS负责页面样式，JavaScript负责页面行为；可以通过$()方法来获得页面的指定节点，参数是某种css的选择器，如上面提到的“$("#verifyButton")”等，这些知识点在JavaScript中就学到了，是一种不断融合和联系的过程。

感谢您的访问！

冯浩月

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
78
评论
JQuery实现用户验证

前言 Dreamweaver是一款非常实用，编辑HTML、CSS文件的工具，自己使用这款工具完成了jQuery知识的学习，下面小编来分享一下其中的一个实例，用户验证的一个例子，重点是CSS样式与HTML结合和jQuery方法的使用，Tomcat服务器的部分会在之后的AJAX的学习中安装使用。认识Dreamweaver一、背景小编知道有这么一款工具是在学习AS
复制链接

扫一扫