js实现登陆与注册功能
本文实例为大家分享了js实现登陆与注册功能的具体代码，供大家参考，具体内容如下 1、首先在phpstudy文件中寻找到一个文件名叫 “www” 的文件 在里面创建html，js，php文件； 2、在Navicat 软件中连接到phpstudy的MySQL； 3、在Navicat 软件中寻找一个数据库 并创建一个表格； 4、书写html代码（如下图1）编写简单的注册表单结构 并通过js 给表单验证；点击注册跳转到php文件中； 5、php代码（如下图2） 首先获取html代码中表单的值 然后查找表单的数据 进行判断 如果用户存在就跳转回到上个html页
### JavaScript 实现登录与注册功能知识点详解
#### 一、项目环境搭建
1. **PHPStudy 安装与配置：**
- PHPStudy 是一款集成了 Apache、PHP、MySQL、phpMyAdmin 和 Nginx 等软件的开发环境。
- 在安装 PHPStudy 后，需要启动内置服务器，确保 Apache 和 MySQL 正常运行。
- 在 PHPStudy 中的“www”文件夹内创建所需的 HTML、JS 和 PHP 文件。
2. **Navicat for MySQL 使用：**
- Navicat 是一款用于管理 MySQL 数据库的强大工具。
- 通过 Navicat 连接到 PHPStudy 中的 MySQL 服务。
- 创建一个新的数据库，并在该数据库中创建用于存储用户信息的表格。
- 表格通常包含以下字段：`id` (自增主键)、`username` (用户名)、`password` (加密后的密码)、`phone` (手机号)、`email` (邮箱)等。
#### 二、前端界面设计与交互逻辑
1. **HTML 表单设计：**
- 表单中包含用户名、密码、确认密码、手机号和邮箱等输入项。
- 提供提交按钮，用于将数据发送至后端处理。
- 示例代码如下：
```html
<form action="register.php" method="POST">
<table>
<caption>注册</caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repass"></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" name="tel"></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</form>
```
2. **JavaScript 表单验证：**
- 在用户提交表单前，使用 JavaScript 进行前端验证。
- 验证包括但不限于：
- 用户名长度限制（4-12位字符）
- 密码强度检查（6-16位数字）
- 密码与确认密码一致
- 手机号格式校验（11位数字且以 1 开头）
- 邮箱格式检查
- 示例代码如下：
```javascript
var form = document.querySelector('form');
var username = document.querySelector('[name="username"]');
var password = document.querySelector('[name="password"]');
var repass = document.querySelector('[name="repass"]');
var tel = document.querySelector('[name="tel"]');
var email = document.querySelector('[name="email"]');
var btn1 = document.querySelector('[type="submit"]');
form.onsubmit = function() {
var reg = /^\w{4,12}$/;
if (!reg.test(username.value.trim())) {
alert('请正确输入用户名');
return false;
}
var reg = /^\d{6,16}$/;
if (!reg.test(password.value.trim())) {
alert('请正确输入密码');
return false;
}
if (password.value.trim() !== repass.value.trim()) {
alert('两次密码输入不正确');
return false;
}
var reg = /^1[3-9]\d{9}$/;
if (!reg.test(tel.value.trim())) {
alert('请正确输入手机号');
return false;
}
var reg = /^([1-9]\d{4,10}@qq|[a-zA-Z]\w{5,17}@(163|126))\.com/;
if (!reg.test(email.value.trim())) {
alert('请正确输入邮箱');
return false;
}
return true;
};
```
#### 三、后端逻辑处理
1. **PHP 处理流程：**
- 在 PHP 文件中接收前端传递过来的数据。
- 对数据进行进一步的验证和处理，例如再次检查数据的有效性，以及对密码进行加密。
- 将经过验证的数据存储到数据库中。
- 如果用户已存在，则返回错误提示。
- 如果一切正常，则跳转到登录页面。
- 示例代码如下：
```php
// register.php
$username = $_POST['username'];
$password = $_POST['password'];
$tel = $_POST['tel'];
$email = $_POST['email'];
// 数据库操作
$conn = new mysqli('localhost', 'root', '', 'your_db_name');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 用户名已存在
echo "用户名已存在，请重新输入";
exit();
}
$hashed_password = password_hash($password, PASSWORD_DEFAULT); // 加密密码
$sql = "INSERT INTO users (username, password, phone, email) VALUES ('$username', '$hashed_password', '$tel', '$email')";
if ($conn->query($sql) === TRUE) {
// 注册成功，跳转到登录页面
header("Location: login.html");
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
```
2. **登录验证：**
- 登录页面同样包含用户名和密码输入框。
- 提交时，在 PHP 文件中验证用户名和密码是否匹配。
- 如果验证成功，则可以将用户名保存在 Cookie 或 Session 中，以便后续页面识别已登录状态。
- 示例代码如下：
```php
// login.php
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
$conn = new mysqli('localhost', 'root', '', 'your_db_name');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM users WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows == 1) {
$row = $result->fetch_assoc();
if (password_verify($password, $row['password'])) {
// 登录成功，保存用户名到 Session
$_SESSION['username'] = $username;
header("Location: index.html"); // 跳转到首页
} else {
echo "密码不正确，请重新输入";
}
} else {
echo "用户名不存在，请重新输入";
}
$conn->close();
```
#### 四、系统安全性增强
1. **密码加密：**
- 使用 `password_hash()` 和 `password_verify()` 函数对密码进行加密和验证。
- 这种方法能够有效防止密码泄露。
2. **SQL 注入防御：**
- 使用预处理语句或参数化查询来避免 SQL 注入攻击。
- 示例代码如下：
```php
$stmt = $conn->prepare("INSERT INTO users (username, password, phone, email) VALUES (?, ?, ?, ?)");
$stmt->bind_param("ssss", $username, $hashed_password, $tel, $email);
$stmt->execute();
$stmt->close();
```
3. **Session 和 Cookie 安全设置：**
- 设置 Session 和 Cookie 的有效期，确保它们不会被滥用。
- 使用 HTTPS 协议传输数据，保护用户的隐私。
通过以上步骤，我们可以构建一个基本的用户登录与注册系统。需要注意的是，这只是一个简单的示例，实际应用中还需要考虑更多细节，比如错误处理、用户体验优化、安全性加强等方面。希望这些内容能帮助你更好地理解和实现 JavaScript 在登录与注册功能中的应用。
2301_803672832024-03-15资源内容总结地很全面，值得借鉴，对我来说很有用，解决了我的燃眉之急。
