javascript 用户输入过滤

原创

mob64ca12f49f4b 2024-09-12 07:00:06 ©著作权

文章标签 表单正则表达式 javascript 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f49f4b的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript 用户输入过滤：初学者指南

引言

在现代 web 开发中，用户输入的过滤至关重要。它不仅有助于提升应用的安全性，防止恶意代码（如 XSS 或 SQL 注入攻击）的注入，还能确保应用的稳定性。本文将引导你实现用户输入的过滤功能，我们将遵循清晰的步骤并提供相应的代码示例。

流程概述

以下是实现用户输入过滤的主要步骤：

步骤编号	步骤描述	实现方式
1	获取用户输入	使用表单和 JavaScript
2	定义过滤规则	选择合适的正则表达式
3	过滤用户输入	使用 JavaScript 的字符串方法和正则
4	显示结果	在网页上展示过滤后的内容

步骤详解

1. 获取用户输入

首先，我们需要创建一个简单的 HTML 表单，让用户可以输入内容。下面是相应的 HTML 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户输入过滤示例</title>
</head>
<body>
    <form id="inputForm">
        <label for="userInput">请输入内容:</label>
        <input type="text" id="userInput" required>
        <button type="submit">提交</button>
    </form>
    <p id="filteredOutput"></p>
    <script src="app.js"></script>
</body>
</html>

2. 定义过滤规则

接下来，我们在 JavaScript 代码中定义我们的过滤规则。这里我们将只允许字母和数字输入，使用正则表达式来实现。

// app.js
// 定义正则表达式，允许的字符为字母和数字
const validInputRegex = /^[a-zA-Z0-9]+$/;

3. 过滤用户输入

接下来，我们通过监听表单的提交事件来过滤用户输入。如果输入不符合我们的规则，就会提醒用户。

// 获取表单元素
const form = document.getElementById('inputForm');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取用户输入
    const input = document.getElementById('userInput').value;

    // 过滤用户输入
    if (validInputRegex.test(input)) {
        // 如果输入有效，显示输出
        document.getElementById('filteredOutput').textContent = `过滤后的内容: ${input}`;
    } else {
        // 如果输入无效，提示错误
        document.getElementById('filteredOutput').textContent = '输入无效，只允许字母和数字!';
    }
});

4. 显示结果

最后，过滤后的结果或者错误信息将会在网页上展示。以上代码中的 filteredOutput 段落将显示相应的信息。

状态图

stateDiagram
    [*] --> 获取用户输入
    获取用户输入 --> 定义过滤规则
    定义过滤规则 --> 过滤用户输入
    过滤用户输入 --> 显示结果

类图

classDiagram
    class UserInput {
        +String userInput
        +boolean isValid()
    }
    class InputFilter {
        +boolean validate(String input)
    }
    UserInput --> InputFilter