jquery 登陆

最新推荐文章于 2024-06-04 15:23:15 发布
最新推荐文章于 2024-06-04 15:23:15 发布
阅读量433 收藏
点赞数
分类专栏： jquery 登陆文本框提示 文章标签： jquery html css javascript 密码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本框输入值文字消失</title>
<script type="text/jscript" src="../jqueryjs/jquery-1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

			$("#focus .input_txt").each(function(){
					var thisVal=$(this).val();
					//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
					if(thisVal!=""){
							$(this).siblings("span").hide();
						}else{
							$(this).siblings("span").show();
						}
					//聚焦型输入框验证	
					$(this).focus(function(){
							$(this).siblings("span").hide();
						}).blur(function(){
								var val=$(this).val();
								if(val!=""){
									$(this).siblings("span").hide();
								}else{
									$(this).siblings("span").show();
								}	
						});
				})
				$("#keydown .input_txt").each(function(){
					var thisVal=$(this).val();
					//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
					if(thisVal!=""){
							$(this).siblings("span").hide();
						}else{
							$(this).siblings("span").show();
						}
						$(this).keyup(function(){
							var val=$(this).val();
							$(this).siblings("span").hide();
						}).blur(function(){
								var val=$(this).val();
								if(val!=""){
									$(this).siblings("span").hide();
								}else{
									$(this).siblings("span").show();
								}
							})
					})	
		})
</script>
<style type="text/css">
	form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
	label{display:block;height:40px;position:relative;margin:20px 0;}
	span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
	.input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
	.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
	.border_radius{border-radius:5px;color:#B00000;}
	h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus">
        <h2>聚焦型提示语消失</h2>
        <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label>
        <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
    </form>
	<form class="border_radius" id="keydown">
    	<h2>输入型提示语消失</h2>
    	<label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius"  /></label>
        <label><span>密码</span><input type="text" class="input_txt border_radius" /></label>
</form>
</body>
</html>

FiveMillion
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery登陆
12-17
在"jquery登陆"的场景中，我们通常会设计一个弹出层来展示登录表单，这样不会打断用户的浏览体验，同时保持页面的整洁。"登陆弹出层"可能是一个隐藏的div元素，通过jQuery的`.show()`和`.hide()`方法来控制其显示和...
基于Jquery实现登录功能的前端页面
阳菜
08-31 3万+
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分： <div class="name"> <label>用户名:</label> <input type="text" name="username" id="username"> </div> <div class="password"&g...
jquery用户登录
weixin_50186567的博客
05-19 690
用户登录 html部分 <form class="loginForm" action="welcome.html"> <div class="inputbox"> <label for="user">用户名：</label> <input id="user" type="text" name="username" placeholder="请输入用户名" required />
使用jquery登录界面案例的实现
studyinstall的博客
06-04 511
【代码】使用jquery登录界面案例的实现。
jQuery 简单实现ajax 登录功能
Code-zyc的博客
04-05 2268
文章目录第一步导入jQuery第二步 后端代码第三步 前端页面 第一步导入jQuery <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> 第二步 后端代码 注意要加 @ResponseBody 注解 不然前端 收不到data @RequestMapping("/login") @ResponseBody public MessageResult
jQuery实现动画登录页面+表单验证+数据采用localStorage本地储存
Henry的博客
09-12 1199
使用jQuery实现登录与注册页面滑动显示，登录与修改密码页面淡入淡出显示，简单的表单验证，注册数据采用localStorage本地储存。
jQuery登陆判断简单实现代码
01-19
代码如下: [removed][removed] [removed] $(‘#txtUserName’).focus(function () { $(‘#txtUserName’).val(”); }) $(‘#txtPassWord’).focus(function () { $(‘#txtPassWord’).val(”); }) $(‘#txtUserName...
漂亮的JQuery登陆注册界面
06-20
总的来说，"漂亮的JQuery登陆注册界面"是一个结合了HTML、CSS和JQuery技术的实例，展示了如何通过优雅的用户界面提升网站的吸引力和功能性。开发者通过遮罩效果和可拓展性设计，为用户提供了一个便捷、直观的登录...
jQuery登陆页面带验证码效果
06-01
**jQuery登录页面带验证码效果** 在Web开发中，创建一个功能完善的登录页面是至关重要的。这个场景中，我们关注的是使用jQuery实现的带有验证码效果的登录页面。jQuery是一个轻量级、高性能的JavaScript库，它极大...
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
weixin_52212950的博客
06-27 3万+
炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS】
jQuery登录和注册
01-25
非常漂亮的登录和注册效果。还有弹出框效果，都是基于jquery的。可以把它加载到自己的程序中加以修改，让这完全符合自己想要的效果。
jquery超炫的登录界面
08-24
一款超炫的登录界面，带动画效果
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤）
qq_51066068的博客
04-26 620
JQuery与AJAX制作的登录小案例（了解其中的每一个步骤） 模拟登录的几大步骤（必知） 需要自己花时间多看看 实现效果：登录获取token，获取用户信息 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
用点jquery实现的登录页面
qq_44645648的博客
11-14 2217
登录页面
jQuery--验证用户登录
罗俊
07-20 7589
前言 内容 HTML代码： CSS代码： JavaScript代码： 总结 HTML知识点: CSS知识点: JavaScript知识点: end 前言 前面的博客对jQuery有所介绍，所以接下来的这几篇博客是对jQuery的介绍，具体介绍方式是用例子呈现给大家。 内容 废话少说，先上代码： HTML代码： &amp;lt;!DOCTYPE html&amp;gt...
JQuery 实现随机生成 数字+字母 验证码
爪白白的个人博客
05-20 4190
原文地址：https://www.jb51.net/article/117132.htm 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
jquery 简单的登录验证
Suoz的博客
11-25 7014
CSS部分：<style type="text/css"> #waimian{ width: 375px; height: 500px; background-color: yellow; position: relative; z-index: 0; } #info{ width
JQuery实现的登陆注册页面表单
热门推荐
隔壁老王的博客
10-15 4万+
一个用JQuery实现非常友好的登陆注册界面表单，可以学习一下，附上代码：需要引入JQuery库jquery-2.1.1.min.js<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta n
jquery登陆注册
最新发布
06-26
jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等常见的Web开发任务。在实现登录注册功能时，jQuery主要是用来处理DOM操作和用户交互，而数据的验证和后端通信通常会涉及到服务器端语言（如PHP、Node.js等）。 使用jQuery实现登录注册的基本步骤： 1. **HTML结构**：创建登录/注册表单，包括输入框、密码输入框、提交按钮等元素。 ```html <form id="loginForm"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> <form id="registerForm"> <!-- ...类似用户名、密码、确认密码等字段 --> <button type="submit">注册</button> </form> ``` 2. **jQuery绑定事件**：使用`.on()`方法为表单绑定提交事件，防止表单默认提交，同时处理验证和提交逻辑。 ```javascript $(document).ready(function() { $('#loginForm, #registerForm').on('submit', function(e) { e.preventDefault(); // 阻止表单默认提交 // 进行表单验证，如为空或不符合规则 if (validateForm()) { // 提交数据到服务器（通常是AJAX请求） sendFormData($(this)); } }); }); ``` 3. **验证函数**：根据实际需求编写验证函数，检查用户输入是否合法。 ```javascript function validateForm() { // 示例：检查用户名和密码是否为空 var username = $('#username').val(); var password = $('#password').val(); if (username === '' || password === '') { alert('请输入完整信息'); return false; } // 更复杂的验证规则可以添加在这里 return true; } function sendFormData(form) { var formData = form.serialize(); $.ajax({ type: 'POST', url: '/api/login/register', // 后端接口地址 data: formData, success: function(response) { console.log(response); }, error: function(xhr, status, error) { console.error(error); } }); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值