制作一个登录表单(包含用户名和密码，登录及清除按钮)

时间: 2024-10-17 08:11:32 浏览: 34

JQuery记住用户名密码实现下次自动登录功能

### JQuery记住用户名密码实现下次自动登录功能知识点解析 #### 知识点一：JQuery及Cookie简介 **JQuery** 是一个快速、小巧、功能丰富的JavaScript库。它使用户能够通过编写更少的代码来操作文档、处理事件、实现动画效果，以及进行Ajax交互。在Web开发中，JQuery极大地简化了JavaScript编程，提高了开发效率。 **Cookie** 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。Cookies的主要用途之一是进行用户身份识别，从而允许用户在登录后浏览网页时不需要重复输入用户名和密码。 #### 知识点二：使用JQuery操作Cookie 在JQuery中操作Cookie，通常需要引入`jquery.cookie.js`插件，该插件提供了便捷的方法来设置、获取和删除Cookie。文中提到的`$.cookie()`方法即为jquery.cookie.js插件提供的方法，它能够让我们轻松地读写Cookie。 #### 知识点三：实现自动登录功能的思路自动登录功能实现的基本思路是：在用户首次登录成功后，将用户名和密码以加密或非加密的方式存储到Cookie中，同时设置Cookie的过期时间（例如7天）。当下次用户访问网站并勾选“记住用户名和密码”复选框时，页面加载时会从Cookie中读取这些信息，并自动填充到登录表单中，用户可以一键点击登录而无需再次输入。 #### 知识点四：具体的实现步骤 1. **引入JQuery和jquery.cookie.js插件**：首先确保在页面中引入了JQuery核心库以及jquery.cookie.js插件。 2. **存储用户名和密码到Cookie**： - 当用户点击登录按钮且复选框被选中时，执行`Save()`函数。 - 在`Save()`函数中，首先判断复选框是否被勾选。 - 如果被勾选，则从文本框中获取用户名和密码，并通过`$.cookie()`方法将这些值存储到Cookie中，同时可以设置Cookie的过期时间。 - 如果复选框未被勾选，则删除存储在Cookie中的用户名和密码信息，并将记录是否记住登录状态的Cookie设置为过期。 3. **页面加载时读取Cookie**： - 在`$(document).ready()`中，通过`$.cookie()`方法检查是否已经存储了“记住用户名密码”的Cookie标记。 - 如果存在，则读取用户名和密码的Cookie值，并将它们填充到相应的表单输入框中，并自动勾选复选框。 4. **表单提交**：用户填写的用户名和密码被存储后，当用户再次访问网站并登录时，可以勾选“记住用户名和密码”复选框，然后一键点击登录按钮完成登录。 #### 知识点五：安全性和隐私问题存储用户名和密码到Cookie存在一定的安全隐患。尽管浏览器提供的cookie通常具备一定的安全机制，但依旧不建议明文存储敏感信息，特别是在不使用HTTPS协议的情况下。出于安全考虑，实际应用中最好对敏感信息进行加密处理，或者使用更安全的认证机制，如使用token进行身份验证。 #### 知识点六：代码示例解析 - **引入JQuery核心文件及jquery.cookie插件**： ```html <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> ``` 上述代码是引入JQuery核心文件和处理Cookie的jquery.cookie插件。 - **JQuery脚本**： ```javascript $(document).ready(function(){ if($.cookie("rmbUser")=="true"){ $("#ck_rmbUser").attr("checked",true); $("#txt_username").val($.cookie("username")); $("#txt_password").val($.cookie("password")); } }); ``` 这段代码在文档加载完成后执行，如果`rmbUser`的Cookie存在且值为`true`，则自动填充用户名和密码，并勾选复选框。 - **保存用户名和密码到Cookie**： ```javascript function Save(){ if($("#ck_rmbUser").attr("checked")){ var str_username = $("#txt_username").val(); var str_password = $("#txt_password").val(); $.cookie("rmbUser","true",{expires:7}); //存储一个带7天期限的cookie $.cookie("username",str_username,{expires:7}); $.cookie("password",str_password,{expires:7}); }else{ $.cookie("rmbUser","false",{expire:-1}); $.cookie("username","",{expires:-1}); $.cookie("password","",{expires:-1}); } }; ``` `Save()`函数根据复选框状态决定是保存用户名密码到Cookie还是清除它们。 - **HTML表单**： ```html <div> 用户名：<input type="text" id="txt_username"/><br/> 密码：<input type="text" id="txt_password"/><br/> <input type="checkbox" id="ck_rmbUser"/>记住用户名和密码<br/> <input type="submit" id="sub" value="登录" onclick="Save()"/> </div> ``` 表单元素允许用户输入用户名、密码，通过复选框选择是否记住登录信息，并有一个提交按钮用于触发登录。通过上述代码和知识点解析，可以了解到JQuery如何帮助实现记住用户名和密码，从而简化用户登录操作的机制和实现方法。然而，需注意，为保证用户数据安全，最好避免在Cookie中存储明文的敏感信息。

制作一个简单的登录表单可以使用HTML结构和一些基本的CSS进行美化。下面是示例代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登录表单</title> <style> body { font-family: Arial, sans-serif; } .login-form { max-width: 300px; margin: auto; padding: 20px; background-color: #f2f2f2; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; border-radius: 4px; } button:hover { opacity: 0.8; } .clear-btn { display: none; /* 隐藏初始的清除按钮 */ } </style> </head> <body> <div class="login-form"> <form id="loginForm" action="#" method="post"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br> <button type="submit">登录</button> <button class="clear-btn" onclick="clearFields()">清除</button> </form> </div> <script> function clearFields() { document.getElementById('username').value = ''; document.getElementById('password').value = ''; document.getElementsByClassName('clear-btn')[0].style.display = 'none'; // 显示登录按钮，隐藏清除按钮 } </script> </body> </html> ``` 此代码定义了一个登录表单，包括用户名输入框、密码输入框以及登录和清除按钮。清除按钮会在用户点击登录后显示，用于清空输入字段。

阅读全文

制作一个登录表单(包含用户名和密码，登录及清除按钮)

相关推荐

vue项目实现表单登录页保存账号和密码到cookie功能

简易登录源码（包含用户名，密码，验证码）

创建一个JSP页面文件，实现登录界面：有用户名和密码输入、提交按钮、重置按钮

JQuery记住用户名和密码的具体实现

session存用户名密码实现用户登录和退出

使用JSP编写登录界面 用户名密码检验

如何让IE记住用户名和密码！绝对可以用

pyqt5 嵌入页面并保存登录页面的用户名和密码，下次登录自动填充

SharedPreferences记住用户名密码

SSM框架实现实时检查用户名是否已经注册以及注册按钮提交表单

清除网页上自动保存登陆用户名密码方法.docx

jQuery 制作一个Ajax带状态提示的登录按钮

用mui框架渲染，完成登录（添加游客登录按钮） 注册功能（本地存储、渲染） 完成修改密码页面（渲染、跳转） 修改邮箱页面 完成主页面的搭建（显示用户名，底部导航实现）

结合前端（HTML、CSS），构建一个包含表单的银行注册页面。使用HTML和CSS设计一个带有表单的网页布局，包括标题、表单项、提交按钮等。表单项可以包括文本输入框、单选框、复选框、下拉框等，根据实际需要进行设计。

用php的形式写一个登录页面代码添加一个重复按钮和超链接

stays mad 反PCL宣传库。Anti PCL pro.zip

伊犁师范大学在四川2020-2024各专业最低录取分数及位次表.pdf

最新推荐

JSP实现用户登录、注册和退出功能

微信小程序简单实现form表单获取输入数据功能示例

stays mad 反PCL宣传库。Anti PCL pro.zip

SSM动力电池数据管理系统源码及数据库详解

管理建模和仿真的文件

MapReduce分区机制揭秘：作业效率提升的关键所在

在电子商务平台上，如何通过CRM系统优化客户信息管理和行为分析？请结合DELL的CRM策略给出建议。

R语言桑基图绘制与SCI图输入文件代码分析

"互动学习：行动中的多样性与论文攻读经历"

如何优化MapReduce分区过程：掌握性能提升的终极策略

使用JSP编写登录界面用户名密码检验

用mui框架渲染，完成登录（添加游客登录按钮）注册功能（本地存储、渲染）完成修改密码页面（渲染、跳转）修改邮箱页面完成主页面的搭建（显示用户名，底部导航实现）