原生JS 限制input输入框只能是8位，少了不能提交表单，并且给出红框和红色文字提示，这个咋写呢？

2024-12-23 11:05:12 JS 1510

在原生 JavaScript 中，可以通过以下步骤实现限制 input 输入框的长度为 8 位字符，并在输入不满足条件时阻止表单提交、给出红框和红色文字提示。

实现步骤

HTML 结构:
- 创建一个 form 表单。
- 在表单中添加一个 input 输入框。
- 添加一个 span 元素来显示错误提示信息。
CSS 样式:
- 设置输入框的红色边框和提示文字的样式。
JavaScript:
- 在 input 输入框的 input 事件中检查输入长度。
- 在表单提交时检查输入长度，如果不满足条件，则阻止表单提交并显示错误信息。

示例代码

HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Validation</title>
    <style>
        .error {
            border: 1px solid red;
        }
        .error-message {
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="myInput">Enter 8 digits:</label>
        <input type="text" id="myInput" maxlength="8">
        <span id="errorMessage" class="error-message">Input must be exactly 8 digits.</span>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function (event) {
            var input = document.getElementById('myInput');
            var errorMessage = document.getElementById('errorMessage');
            if (input.value.length !== 8) {
                input.classList.add('error');
                errorMessage.style.display = 'inline';
                event.preventDefault(); // 阻止表单提交
            } else {
                input.classList.remove('error');
                errorMessage.style.display = 'none';
            }
        });

        document.getElementById('myInput').addEventListener('input', function () {
            var input = document.getElementById('myInput');
            var errorMessage = document.getElementById('errorMessage');
            if (input.value.length !== 8) {
                input.classList.add('error');
                errorMessage.style.display = 'inline';
            } else {
                input.classList.remove('error');
                errorMessage.style.display = 'none';
            }
        });
    </script>
</body>
</html>

解释

HTML:
- input 元素用于输入字符，设置 maxlength 属性为 8，以限制最大输入长度。
- span 元素用于显示错误提示信息，初始状态为隐藏。
CSS:
- .error 类用于设置输入框的红色边框。
- .error-message 类用于设置错误提示文字的颜色，并在初始状态下隐藏。
JavaScript:
- 在表单提交事件处理函数中检查 input 的值长度。如果长度不是 8，则添加 .error 类并显示错误信息，阻止表单提交。
- 在 input 事件处理函数中动态检查输入长度，并根据输入情况显示或隐藏错误信息。

关键字

原生 JavaScript, 表单验证, input 长度限制, 错误提示, CSS 样式, 事件处理