有一个名为inputNumber.jsp的页面提供一个表单，用户可以通过表单输入两个数和运算符号提交给Servlet控制器；由名为ComputerBean.java生成的JavaBean负责存储运算数、运算符号和运算结果，由名为handleComputer的servlet控制器负责运算，将结果存储到JavaBean中，并负责请求JSP页面lookResult.jsp显示JavaBean中的数据。

时间: 2023-07-14 09:13:29 浏览: 186

input框只能输入数字和一个小数点

3星 · 编辑精心推荐

在IT领域，特别是前端开发中，对于输入框（input）的控制与验证是十分关键的一环，这直接关系到用户体验和数据的有效性。标题“input框只能输入数字和一个小数点”以及描述“input框只能输入数字和一个小数点，对界面验证很好用”，都指向了如何在HTML表单中限制input元素只接受数值型输入，包括整数和浮点数，且浮点数只允许有一个小数点。 ### 知识点一：HTML input类型与属性在HTML中，`<input>`标签提供了多种类型，如`text`、`number`等。其中，`type="number"`可以限制用户输入为数字，但默认情况下它允许输入负数和小数。为了完全符合题目要求，即仅限于非负数，并确保小数点的唯一性，通常需要额外的JavaScript代码来实现更精确的控制。 ### 知识点二：JavaScript实现数字和小数点输入限制这部分涉及到了JavaScript的事件监听器和字符串处理技术。以下是一种可能的实现方式： ```javascript // 获取input元素 var input = document.getElementById('your-input-id'); // 监听键盘输入事件 input.addEventListener('input', function(event) { var value = event.target.value; // 移除多余的非数字字符和多余的小数点 var cleanedValue = value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'); event.target.value = cleanedValue; }); ``` 以上代码中，我们首先通过`getElementById`获取到特定的input元素，然后为其添加了一个`input`事件监听器。当用户在input框中输入任何内容时，监听器将触发一个函数，该函数会检查并修改input框中的值，移除所有非数字字符，并确保小数点最多出现一次。 ### 知识点三：正则表达式在数据验证中的应用在上述JavaScript代码片段中，正则表达式`/[^0-9.]/g`用于匹配任何非数字或非小数点的字符，而`/(\..*)\./g`则用于查找并替换多余的点号，保证小数点的唯一性。正则表达式的灵活运用是实现复杂数据验证的关键技术之一。 ### 知识点四：DOM操作与事件委托虽然给定的部分内容看起来并不直接关联到input框的数字限制问题，但它展示了DOM操作和事件委托的一些技巧，例如使用`nextnode`和`prevnode`函数遍历DOM树，以及使用`addEvent`函数添加事件监听器。这些技能在构建复杂的用户界面和交互逻辑时非常有用。 ### 总结限制input框只能输入数字和一个小数点的需求，在实际项目中相当常见。通过合理利用HTML的`<input>`元素类型，结合JavaScript的事件监听和正则表达式，可以有效地实现这一目标。同时，深入理解DOM操作和事件处理机制，将帮助开发者创建更加健壮和用户友好的前端应用程序。

这个应用程序的实现比较简单，主要包括三个部分：前端页面、JavaBean和Servlet控制器。 1. 前端页面在inputNumber.jsp页面中，用户可以输入两个数和运算符号，然后提交表单给Servlet控制器。页面的代码如下： ```html <html> <head> <title>计算器</title> </head> <body> <h1>计算器</h1> <form action="handleComputer" method="post"> <label>第一个数：</label> <input type="number" name="num1"><br> <label>第二个数：</label> <input type="number" name="num2"><br> <label>运算符：</label> <select name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select><br> <input type="submit" value="计算"> </form> </body> </html> ``` 2. JavaBean 在ComputerBean.java中，我们定义了一个JavaBean类，用于存储运算数、运算符号和运算结果。代码如下： ```java public class ComputerBean implements Serializable { private static final long serialVersionUID = 1L; private double num1; private double num2; private String operator; private double result; public double getNum1() { return num1; } public void setNum1(double num1) { this.num1 = num1; } public double getNum2() { return num2; } public void setNum2(double num2) { this.num2 = num2; } public String getOperator() { return operator; } public void setOperator(String operator) { this.operator = operator; } public double getResult() { return result; } public void setResult(double result) { this.result = result; } } ``` 3. Servlet控制器在handleComputer的servlet控制器中，我们首先获取用户提交的运算数和运算符号，然后进行运算，最后将结果存储到JavaBean中，并请求JSP页面lookResult.jsp显示结果。代码如下： ```java public class handleComputer extends HttpServlet { private static final long serialVersionUID = 1L; public handleComputer() { super(); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { double num1 = Double.parseDouble(request.getParameter("num1")); double num2 = Double.parseDouble(request.getParameter("num2")); String operator = request.getParameter("operator"); double result = 0; switch (operator) { case "+": result = num1 + num2; break; case "-": result = num1 - num2; break; case "*": result = num1 * num2; break; case "/": result = num1 / num2; break; } ComputerBean bean = new ComputerBean(); bean.setNum1(num1); bean.setNum2(num2); bean.setOperator(operator); bean.setResult(result); request.setAttribute("bean", bean); RequestDispatcher dispatcher = request.getRequestDispatcher("lookResult.jsp"); dispatcher.forward(request, response); } } ``` 在lookResult.jsp页面中，我们可以显示JavaBean中的运算数、运算符号和运算结果。代码如下： ```html <html> <head> <title>计算结果</title> </head> <body> <h1>计算结果</h1> <table border="1"> <tr> <td>第一个数：</td> <td>${bean.num1}</td> </tr> <tr> <td>第二个数：</td> <td>${bean.num2}</td> </tr> <tr> <td>运算符：</td> <td>${bean.operator}</td> </tr> <tr> <td>结果：</td> <td>${bean.result}</td> </tr> </table> </body> </html> ```

阅读全文

相关推荐

优化注册流程：一步一提交的jQuery表单设计

JSP表单处理：掌握request、response和out对象

编写两个jsp页面a.jsp和b.jsp，a.jsp页面提供一个表单，用户可以通过表单输入矩形的两个边长提交给b.jsp，b.jsp调用一个request bean 去完成计算矩形面积的任务，b.jp

编写两个JSP页面a.jsp和b.jsp，a.jsp页面提供一个表单，用户可以通过表单输入矩形的两个边长交给b.jsp页面，b.jsp调用一个request bean去完成计算矩形面积的任务。b.jsp页面使用getProperty动作标记显示矩形的面积。

编程实现：创建一个inputR.jsp页面，在该页面中输入圆的半径，然后提交给AreaServlet.java，在该Servlet中

编写两个JSP页面1.jsp与2.jsp,1.jsp提供表单，供用户输入三角形三条边提供给2.jsp,用户提交表单后，jsp页面将计算三角形面积算三角形面积和周长的任务交给一个bean去完成，创建bean的源文件是3.java

计算并显示圆的面积及周长。 具体步骤如下： 1、编写2个JSP页面index.jsp、showCircle.jsp。 2、在页面index.jsp中提供一个表单，用户可以通过表单输入圆的半径，提

编写一个JSP页面：inputAndShow.jsp和一个名字为car的Javabean，其中car由Car.class类负责创建。inputAndShow.jsp要求：该页面有一个表单，用户通过该表

新建2个JSP页面，用input.jsp页面通过表单提交用户名和一个圆的半径，将它们存入session对象中，然后重定向到show.jsp 页面，输出用户名，获取半径值并计算出圆的面积并输出。需要对空对象进行处理，对异常数据进行处理。

创建web项目，用input.jsp页面通过表单提交用户名和一个圆的半径，将它们存入session对象中，然后重定向到show.jsp 页面，输出用户名，获取半径值并计算出圆的面积并输出。需要对空对象进行处理，对异常数据进行处理。

最新推荐

【路径规划】乌燕鸥算法栅格地图机器人最短路径规划【含Matlab仿真 2886期】.zip

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

在Flow-3D中，如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

Python实现8位等离子效果开源项目plasma.py解读

计算并显示圆的面积及周长。具体步骤如下： 1、编写2个JSP页面index.jsp、showCircle.jsp。 2、在页面index.jsp中提供一个表单，用户可以通过表单输入圆的半径，提