JavaScript实现表单验证：输入1-7个不重复数字

答案：

可以使用 JavaScript 来实现一个简单的表单验证，确保用户输入的内容是 1 到 7 个数字，并且这些数字不能重复。下面是一个示例代码，展示了如何实现这个功能：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>
    <h1>数字输入验证</h1>
    <form id="numberForm">
        <label for="numbers">请输入1-7个数字（不重复）：</label>
        <input type="text" id="numbers" name="numbers" required>
        <button type="submit">提交</button>
        <p class="error" id="errorMessage"></p>
    </form>

    <script>
        document.getElementById('numberForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单提交

            const input = document.getElementById('numbers').value;
            const errorMessage = document.getElementById('errorMessage');
            errorMessage.textContent = ''; // 清空错误信息

            // 检查输入是否符合要求
            const numbersArray = input.split('').map(Number);
            const uniqueNumbers = new Set(numbersArray);

            if (numbersArray.length < 1 || numbersArray.length > 7) {
                errorMessage.textContent = '请输入1到7个数字。';
                return;
            }

            if (numbersArray.length !== uniqueNumbers.size) {
                errorMessage.textContent = '输入的数字不能重复。';
                return;
            }

            // 检查是否都是数字
            if (!numbersArray.every(num => !isNaN(num) && num >= 0 && num <= 9)) {
                errorMessage.textContent = '请输入有效的数字（0-9）。';
                return;
            }

            // 如果通过所有验证，可以提交表单
            alert('输入有效！');
            // 这里可以执行表单提交的操作，例如发送数据到服务器
        });
    </script>
</body>
</html>

代码说明：

HTML部分：
- 创建一个简单的表单，包含一个文本输入框和一个提交按钮。
- 使用一个段落元素来显示错误信息。
JavaScript部分：
- 监听表单的 submit 事件，阻止默认的提交行为。
- 获取用户输入的值，并将其转换为数字数组。
- 使用 Set 来检查输入的数字是否唯一。
- 验证输入的长度是否在 1 到 7 之间，是否有重复数字，以及是否都是有效的数字（0-9）。
- 如果所有验证通过，显示一个提示框，表示输入有效。

使用方法：

将上述代码复制到一个 HTML 文件中，然后在浏览器中打开。输入 1 到 7 个数字进行测试。

JavaScript实现表单验证：输入1-7个不重复数字

使用 GPT-4o Mini 回答，作者 GPT4oMini.app

代码说明：

使用方法：