input输入框 正则表达式只能输入数字 数字范围为不能小于20且不能大于50

可以使用HTML5中的pattern属性来实现输入框只能输入数字的限制，再通过JavaScript来判断数字范围是否符合要求。示例代码如下：

<!-- 在input标签中添加pattern属性，限制只能输入数字 -->
<input type="text" pattern="\d*" id="inputNum">

<script>
    var inputNum = document.getElementById("inputNum");
    inputNum.addEventListener("input", function(){
        // 判断输入的数字是否符合要求
        var num = parseInt(inputNum.value);
        if (num < 20 || num > 50) {
            inputNum.setCustomValidity("数字范围为20~50");
        } else {
            inputNum.setCustomValidity("");
        }
    });
</script>

以上代码中，使用了addEventListener监听了input事件，每次输入时都会判断当前输入的数字是否符合要求。如果不符合要求，则通过setCustomValidity方法设置输入框的错误提示信息。如果符合要求，则将错误提示信息清空。注意要将输入框的type属性设置为text，否则无法输入数字。

相关问题

【前端】input输入框大于0小于200的整数，如果输入的不是大于等于 0 的整数，则不允许输入

可以使用 `oninput` 事件来监听输入框的输入，然后在事件处理函数中对输入内容进行判断，如果不是大于等于0的整数，则阻止输入。代码如下：

HTML：

<input type="number" min="0" max="200" oninput="checkInput(event)">

JavaScript：

function checkInput(event) {
  const input = event.target;
  const value = input.value;
  if (value !== '' && (!/^[0-9]*$/.test(value) || parseInt(value) < 0)) {
    input.value = '';
  }
}

上面的代码中，我们首先获取输入框的值，然后使用正则表达式判断是否为数字，如果不是数字或小于0，则将输入框的值清空。同时，我们在 HTML 中设置了 `min` 和 `max` 属性，来限制输入框的取值范围。

雇员录入页面（input.jsp） 页面要求： 1：名称、年龄、邮件不能为空。 2：年龄必须为数字，不能小于20且不能大于50。 3：验证时必须使用正则表达式。 4：本页为整个程序的欢迎页面。 雇员一览页面（view.jsp） 页面要求： 1：打开本页面时，要求将雇员表中所有雇员的信息显示出来。 雇员个人信息页面（viewone.jsp） 页面要求： 1：页面的标题为“雇员XXX的个人信息”，其中“XXX”为选中雇员的姓名。 2：单击“关闭”时关闭本页面。 雇员修改页面（modify.jsp） 1：在view.jsp中单击任意一条雇员信息的“修改”链接时打开本页面，并要求将选中的雇员信息显示到本页面中。 2：每个输入项的验证规则同input.jsp. 雇员查询页面（search.jsp） 页面要求： 1：点击查询时，根据用户输入的查询内容，到雇员表中找出满足条件的记录。 数据库脚本： create table employeetb( id varchar (23) primary key, name varchar (20) not null, age int(3) not null, email varchar (30) not null, title varchar (3) not null, briefIntro varchar (100) ); 使用MySQL数据库。

对于这个问题，我可以提供一些思路和建议，但是具体的实现需要根据你的具体需求和技术栈来进行。

对于输入页面 input.jsp，你可以使用 HTML 表单来实现，其中需要添加一些 JavaScript 代码来进行表单验证。具体来说，可以在提交表单时使用 JavaScript 来判断输入框是否为空，以及年龄是否符合要求（可以使用正则表达式来判断输入是否为数字，然后判断是否在 20 到 50 之间）。

对于显示雇员列表的页面 view.jsp，你可以使用 JSP 或者其他服务器端技术来从数据库中读取雇员信息，并将它们显示在页面上。具体来说，可以使用 JDBC 连接数据库，然后读取 employeetb 表中的数据，最后将它们显示在 HTML 页面中。

对于显示单个雇员信息的页面 viewone.jsp，你可以使用类似的方法从数据库中读取特定的雇员信息，并将它们显示在页面上。具体来说，可以在 view.jsp 中为每个雇员信息添加一个链接，然后在点击链接时跳转到 viewone.jsp 页面，并将所选雇员的信息显示出来。

对于修改雇员信息的页面 modify.jsp，你可以使用类似的方法读取指定的雇员信息，并在页面中显示出来。然后，当用户提交修改后，你可以使用 SQL 语句来更新数据库中的数据。

对于查询雇员信息的页面 search.jsp，你可以使用表单和 JavaScript 来实现。具体来说，可以在页面上添加一个查询输入框和一个“查询”按钮，然后使用 JavaScript 来获取用户输入的查询内容，并使用 SQL 语句来查找符合条件的数据。

总体来说，以上是一些基本的思路和建议，具体的实现需要根据你的具体需求和技术栈来进行。同时，需要注意保护用户输入的安全，防止 SQL 注入等攻击。