实现功能：用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。要求：使用Filter技术对用户提交的数字进行校验，如果用户输入的是非阿拉伯数字，提示用户重新输入。考核目标： Filter的使用 1. 实现思路和代码

时间: 2024-03-17 19:41:00 浏览: 89

基于jquery的设置页面文本框只能输入数字的实现代码

知识点一：使用jQuery实现在文本框中只能输入数字在Web开发中，经常需要在文本框中限制用户输入的数据类型，以确保数据的准确性和安全性。例如，在输入价格、电话号码等信息时，我们需要确保用户只能输入数字。为了实现这一点，可以使用jQuery库提供的方法来绑定事件并进行验证。在提供的代码中，我们可以看到两种使用jQuery的实现方式。第一种是绑定在id为"money"的文本框上，通过监听"propertychange"事件来过滤掉非数字的字符。如果用户输入的值不是一个数字，则会将其替换为空字符串，这样就只能输入数字了。知识点二：屏蔽空格输入用户在输入时可能会不小心输入空格，这在需要输入纯数字的场景中是不允许的。上述代码中使用了正则表达式来检查字符串的首尾是否有空格，并将其移除。具体做法是使用.replace方法，配合正则表达式/(^\s*)|(\s*$)/g来匹配字符串首尾的空格，并将其替换为空字符串。知识点三：屏蔽小数点输入在某些场景中，如输入价格时，我们不仅需要屏蔽非数字的字符，还需限制只能输入整数，不允许输入小数。上述代码展示了如何通过正则表达式匹配并移除小数点。如果字符串中包含小数点，则将小数点替换为空字符串，并使文本框重新获得焦点。知识点四：使用CSS禁止拖拽和粘贴为了进一步增强数据输入的限制，可以通过CSS属性来禁止拖拽和粘贴。具体做法是为文本框设置特定的CSS类，如".TextBox_NotDragpaste"，然后在该类中定义"ondragenter"和"onpaste"事件的处理函数，使得这些事件的返回值为false，从而阻止拖拽和粘贴操作。知识点五：禁止输入中文有时候，我们还需要确保文本框中不能输入中文字符，以避免数据处理上的错误或歧义。可以通过设置CSS属性"ime-mode"为"disabled"来禁止输入法的使用，这样可以阻止用户在文本框中输入中文。在设置此属性时，还可以与其他防止拖拽和粘贴的设置一起使用，形成更为严格的输入限制。知识点六：使用正则表达式和Number函数进行数据验证在上述代码中，通过正则表达式和Number函数进行数据验证是一个关键步骤。正则表达式被用来删除所有非数字字符，而Number函数则用来验证剩余字符是否可以转换成一个数字。如果不能转换成数字，代码会再次清空文本框或替换掉不符合要求的字符。知识点七：对现有实现的改进原有实现方法存在缺陷，可以输入空格。通过加入过滤空格的功能，改进了原有方法。这表明在实际开发过程中，往往需要对初步实现的功能进行审视和优化，以满足更严格的需求和防止潜在的问题。通过上述内容的学习，开发者可以掌握如何使用jQuery和CSS来增强HTML表单元素的输入验证，确保用户输入的数据类型符合预期要求，从而提高Web应用数据处理的准确性和安全性。

实现思路： 1. 创建一个Filter，在其中对用户提交的数字进行校验。 2. 在web.xml文件中配置Filter的映射路径，使得用户提交的数字通过该Filter进行校验。 3. 如果用户输入的是非阿拉伯数字，将请求转发到一个错误页面，提示用户重新输入。 4. 如果用户输入的是阿拉伯数字，则继续执行后续的业务逻辑，计算数字之和并将结果显示在第三个页面中。代码实现： 1. 创建一个Filter，代码如下： ```java import java.io.IOException; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; @WebFilter(filterName = "NumberFilter", urlPatterns = { "/page2", "/page3" }) public class NumberFilter implements Filter { public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest httpRequest = (HttpServletRequest) request; String number = httpRequest.getParameter("number"); if (number.matches("\\d+")) { chain.doFilter(request, response); } else { RequestDispatcher dispatcher = httpRequest.getRequestDispatcher("/error.jsp"); dispatcher.forward(request, response); } } public void init(FilterConfig fConfig) throws ServletException { } public void destroy() { } } ``` 2. 在web.xml文件中配置Filter的映射路径，代码如下： ```xml <filter> <filter-name>NumberFilter</filter-name> <filter-class>NumberFilter</filter-class> </filter> <filter-mapping> <filter-name>NumberFilter</filter-name> <url-pattern>/page2</url-pattern> <url-pattern>/page3</url-pattern> </filter-mapping> ``` 3. 在第二个页面和第三个页面中，获取用户输入的数字并进行处理，代码如下：第二个页面： ```html <form action="page3" method="post"> <label for="number2">数字二：</label> <input type="text" id="number2" name="number" /> <input type="submit" value="计算和" /> </form> ``` 第三个页面： ```java int number1 = Integer.parseInt(request.getParameter("number1")); int number2 = Integer.parseInt(request.getParameter("number2")); int sum = number1 + number2; response.getWriter().println(number1 + " + " + number2 + " = " + sum); ``` 4. 创建一个错误页面，提示用户重新输入，代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Error</title> </head> <body> <p>您输入的不是数字，请重新输入！</p> </body> </html> ``` 这样，就完成了使用Filter技术对用户输入进行校验的功能实现。如果用户输入的是非阿拉伯数字，会被重定向到错误页面，提示用户重新输入；如果用户输入的是阿拉伯数字，则会继续执行后续的业务逻辑，计算数字之和并将结果显示在第三个页面中。

阅读全文

相关推荐

android输入数据点击按钮就可以传递到另外一个页面显示

PHP+MySQL实现输入页码跳转到指定页面功能示例

实现功能： 用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。 要求： 使用Filter技术对用户提交的数字进行校验，如果用户输入的是非阿拉伯数字，提示用户重新输入。

按要求编写程序，实现功能： 用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。 要求： 求和计算功能必须使用Servlet技术实现。

vue代码：请实现一个比较2个数字小大的页面，当输入2个数字后，单机“比较”按钮后自动比较这两个数字的大小，页面效果参考图3-20。比较数字大小结果显示的页面效果参考3-21

在页面实现简易计算器，用户在页面输入第一个数和第二个数，点击相应操作符将操作结果显示在计算结果文本框中

css代码写一个页面，实现电话号码提交验证，重新书写，退出功能，电话号码验证规则为：第一电话号码为数字，第二带区号则在区号与号码中间插入-号，第三电话号码为8位数字且区号为4位数字或者空

设计一个页面，用户可以输入两个数字，页面返回这两个数字之间的一个随机数

VC++ 添加页面标签第一页输入两个数字点击求差按钮进行减法运算翻至第二页在第二页显示该减法运算式

java web实现功能： 用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。 要求： 求和计算功能必须使用SQL技术实现

mysql数据库项目-MySQL数据库设计与实现-图书管理系统的实例详解

java毕设项目之洪涝灾害应急信息管理系统设计与实现+lw(源码+说明文档+mysql).zip

最新推荐

mysql数据库项目-MySQL数据库设计与实现-图书管理系统的实例详解

java毕设项目之洪涝灾害应急信息管理系统设计与实现+lw(源码+说明文档+mysql).zip

EasyConnect远程办公客户端7.6.3Mac版

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

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

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

实现功能：用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。要求：使用Filter技术对用户提交的数字进行校验，如果用户输入的是非阿拉伯数字，提示用户重新输入。

按要求编写程序，实现功能：用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。要求：求和计算功能必须使用Servlet技术实现。

java web实现功能：用户在第一个页面输入数字一，在第二个页面输入数字二，第三个页面显示：“数字一 + 数字二 = 和”。要求：求和计算功能必须使用SQL技术实现