HTML中限制input 输入框输入内容

学习&实践爱好者

已于 2024-07-30 14:51:54 修改

阅读量7.3k

点赞数 6

分类专栏： HTML5与CSS3 JavaScrip技术文章标签： html 前端 javascript

于 2022-07-12 16:54:24 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125739434

版权

JavaScrip技术同时被 2 个专栏收录

131 篇文章 24 订阅

订阅专栏

HTML5与CSS3

82 篇文章 15 订阅

订阅专栏

HTML中限制input 输入框输入内容

先介绍使用 oninput 事件，限制HTML中input 输入框输入内容的方式，再介绍用其它方式限制HTML中input 输入框输入内容。

只能输入纯数字的输入框

关键代码oninput = "value=value. replace(/[^\d]/g,'')"，注意括号中是两个单引号，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入纯数字</title>
</head>
<body>
    只能输入纯数字的输入框:<input type="text" oninput="value=value.replace(/[^\d]/g,'')">
</body>
</html>

说明：其中replace() 方法中使用了正则表达式，关于正则表达式可参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

只能输入大小写字母、数字、下划线

关键代码oninput = "value=value.replace(/[^\w_]/g,''')"，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入大小写字母、数字、下划线</title>
</head>
<body>
    只能输入大小写字母、数字、下划线的输入框:<input type="text" oninput="value=value.replace(/[^\w_]/g,'')">
</body>
</html>

只能输入小写字母、数字、下划线

关键代码oninput = "value=value. replace(/[^a-z0-9_]/g,'')，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入小写字母、数字、下划线</title>
</head>
<body>
    只能输入小写字母、数字、下划线的输入框:<input type="text" oninput="value=value.replace(/[^a-z0-9_]/g,'')">
</body>
</html>

只能输入数字和点

关键代码oninput = "value=value. replace(/[^\d.]/g,'')"，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入数字和点</title>
</head>
<body>
    只能输入数字和点的输入框:<input type="text" oninput="value=value.replace(/[^\d.]/g,'')">
</body>
</html>

只能输入中文

关键代码oninput = "value=value.replace(/[^\u4e00-\u9fa5]/g,'')"，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入中文</title>
</head>
<body>
    只能输入中文的输入框:<input type="text" oninput="value=value.replace(/[^\u4e00-\u9fa5]/g,'')">  
</body>
</html>

只能输入英文

关键代码oninput = "value=value.replace(/[^a-zA-Z]/g,'')"，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入英文</title>
</head>
<body>
    只能输入英文的输入框:<input type="text" oninput="value=value.replace(/[^a-zA-Z]/g,'')">  
</body>
</html>

上面使用 oninput 事件，限制HTML中input 输入框输入内容的方式，下面介绍用其它方式限制HTML中input 输入框输入内容。

设置不可编辑方法

限制input 输入框输入内容

可以使用disabled 属性、readonly 属性或readonly unselectable属性

disabled="disabled" 和readonly unselectable="on"或readonly="readonly"

disabled 属性使input 输入框只读，可复制，可选择，不能提交即后台不会接收到传值，文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。

示例：<input type="text" disabled="disabled" />

完整示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入大小写字母、数字、下划线</title>
</head>
<body>
    输入框不可编辑且变灰:<input type="text" value="abc123" disabled="disabled"/>
</body>
</html>

readonly 属性使input 输入框只读，可复制，可选择，能提交即后台会接收到传值。

示例：<input type="text" readonly="readonly">

完整示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>只能输入大小写字母、数字、下划线</title>
</head>
<body>
    输入框不可编辑:<input type="text" value="abc123" readonly="readonly"/>
</body>
</html>

readonly unselectable 属性

示例：<input type="text" readonly unselectable="on">

readonly unselectable="on"和readonly="readonly"效果类似，就不多说了。

HTML的 <input> 标签类型也能决定输入

例如：

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>input标签类型测试 </title>
</head>
<body>   
此框只能输入数值：<input type="number" />  
</body>
</html>

<input> 标签的输入类型参见 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

HTML的<input>标签的pattern 属性也能规定用于验证

例如：

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>input标签pattern属性测试 </title>
</head>
<body>   
<form>
    三个字母：<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="三个字母">
    <input type="submit">
</form>
</body>
</html>

HTML的<input>的pattern属性参见 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern

使用try-catch限制HTML5输入框

每当用户输入或更改值时都会立即显示验证结果。用户可以看到他们的输入是否有效，以及如果无效，具体是什么原因。

正则表达式（Regular Expression，常简写为 regex 或 regexp）是一种用于匹配字符串中字符组合的模式。它是一个强大的文本处理工具，在很多编程语言中都有支持。例如，/^\d+$/ 用于检查字符串是否只包含数字。这个正则表达式的含义是：

^ 表示字符串的开始

\d 表示任何数字

+ 表示前面的元素（在这里是数字）可以出现一次或多次

$ 表示字符串的结束

虽然正则表达式非常强大，但不是必须的，很多可以用正则表达式完成的任务也可以用其他方法实现。

例1：使用try-catch和正则表达式限制HTML5输入框，要求：限制输入 0 到 100 之间的正整数（不能带小数）。

使用try-catch和正则表达式，源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整数输入验证</title>
</head>
<body>
    <h1>整数输入验证（实时，使用try-catch和正则表达式）</h1>
    <label for="integerInput">请输入一个 0 到 100 之间的正整数（不能带小数）：</label>
    <input type="text" id="integerInput">
    <p id="integerError"></p>

    <script>
        function validateInteger() {
            const input = document.getElementById('integerInput');
            const error = document.getElementById('integerError');
            const value = input.value.trim();

            try {
                if (value === '') throw new Error("请输入一个数值");
                if (!/^\d+$/.test(value)) throw new Error("输入的不是正整数，请重新输入");
                
                const n = parseInt(value, 10);
                if (n < 0 || n > 100) throw new Error("输入的正整数不在 0 到 100 之间，请重新输入");
                
                error.textContent = "输入正确";
                error.style.color = "green";
            } catch (e) {
                error.textContent = e.message;
                error.style.color = "red";
            }
        }

        document.getElementById('integerInput').addEventListener('input', validateInteger);
    </script>
</body>
</html>

改进，使用try-catch但不用正则表达式，这使得代码更加直观（对于不熟悉正则表达式的开发者来说），源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整数输入验证</title>
</head>
<body>
    <h1>整数输入验证（实时，使用try-catch）</h1>
    <label for="integerInput">请输入一个 0 到 100 之间的正整数（不能带小数）：</label>
    <input type="text" id="integerInput">
    <p id="integerError"></p>

    <script>
        function validateInteger() {
            const input = document.getElementById('integerInput');
            const error = document.getElementById('integerError');
            const value = input.value.trim();

            try {
                if (value === '') throw new Error("请输入一个数值");
                
                // 检查是否只包含数字
                for (let i = 0; i < value.length; i++) {
                    if (value[i] < '0' || value[i] > '9') {
                        throw new Error("输入的不是正整数，请重新输入");
                    }
                }
                
                const n = parseInt(value, 10);
                
                // 检查是否为整数
                if (n.toString() !== value) throw new Error("输入的不是正整数，请重新输入");
                
                // 检查范围
                if (n < 0 || n > 100) throw new Error("输入的正整数不在 0 到 100 之间，请重新输入");
                
                error.textContent = "输入正确";
                error.style.color = "green";
            } catch (e) {
                error.textContent = e.message;
                error.style.color = "red";
            }
        }

        document.getElementById('integerInput').addEventListener('input', validateInteger);
    </script>
</body>
</html>

例2：请输入一个 0 到 100 之间的数值（可带小数），用于限制HTML5输入框。

使用try-catch和正则表达式，源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮点数输入验证</title>
</head>
<body>
    <h1>浮点数输入验证（实时，使用try-catch和正则表达式）</h1>
    <label for="floatInput">请输入一个 0 到 100 之间的数值（可带小数）：</label>
    <input type="text" id="floatInput">
    <p id="floatError"></p>

    <script>
        function validateFloat() {
            const input = document.getElementById('floatInput');
            const error = document.getElementById('floatError');
            const value = input.value.trim();

            try {
                if (value === '') throw new Error("请输入一个数值");
                
                if (!/^-?\d*\.?\d+$/.test(value)) throw new Error("输入的不是有效的数值格式，请重新输入");
                
                const num = parseFloat(value);
                if (num < 0 || num > 100) throw new Error("输入的数值不在 0 到 100 之间，请重新输入");
                
                error.textContent = "输入正确";
                error.style.color = "green";
            } catch (e) {
                error.textContent = e.message;
                error.style.color = "red";
            }
        }

        document.getElementById('floatInput').addEventListener('input', validateFloat);
    </script>
</body>
</html>

改进，使用try-catch但不用正则表达式，这使得代码更加直观（对于不熟悉正则表达式的开发者来说），源码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮点数输入验证</title>
</head>
<body>
    <h1>浮点数输入验证（实时，使用try-catch）</h1>
    <label for="floatInput">请输入一个 0 到 100 之间的数值（可带小数）：</label>
    <input type="text" id="floatInput">
    <p id="floatError"></p>

    <script>
        function validateFloat() {
            const input = document.getElementById('floatInput');
            const error = document.getElementById('floatError');
            const value = input.value.trim();

            try {
                if (value === '') throw new Error("请输入一个数值");
                
                // 检查是否为有效数值格式
                let dotCount = 0;
                let isNegative = false;
                for (let i = 0; i < value.length; i++) {
                    if (i === 0 && value[i] === '-') {
                        isNegative = true;
                        continue;
                    }
                    if (value[i] === '.') {
                        dotCount++;
                        if (dotCount > 1) throw new Error("输入的不是有效的数值格式，请重新输入");
                        continue;
                    }
                    if (value[i] < '0' || value[i] > '9') {
                        throw new Error("输入的不是有效的数值格式，请重新输入");
                    }
                }
                
                const num = parseFloat(value);
                if (isNaN(num)) throw new Error("输入的不是有效的数值格式，请重新输入");
                
                // 检查范围
                if (num < 0 || num > 100) throw new Error("输入的数值不在 0 到 100 之间，请重新输入");
                
                error.textContent = "输入正确";
                error.style.color = "green";
            } catch (e) {
                error.textContent = e.message;
                error.style.color = "red";
            }
        }

        document.getElementById('floatInput').addEventListener('input', validateFloat);
    </script>
</body>
</html>