判断输入框输入的是否是数字，不是则阻止提交

最新推荐文章于 2021-05-07 22:48:56 发布
原创 最新推荐文章于 2021-05-07 22:48:56 发布 · 940 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#string #path #html #import #java #input

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>提交前判断输入框是否是数字，不是终止提交</title>
  <script type="text/javascript">
  
  function chkForm(form)
 {
   alert('') ;
  var value = form.d1.value;
  var len = value.length;
  for(var i=0;i<len;i++)
  {
   if(value.charAt(i)>"9" || value.charAt(i)<"0")
   {
    alert("含有非数字字符");     
    return false;
   }
  }
  return true;
 }
  </script>
  </head>
 
  <body>
 
    <form onsubmit="return chkForm(this);">
  <input type="text" name="d1"/>
  <input type="submit"/>
 </form>


  </body>
</html>

 

 

 

 

 

判断输入框输入的是不是全部都是数字

 


<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>检查输入框输入的是否都是数字</title>

  <script type="text/javascript">

function chkNumber(eleText) {
 var value = eleText.value;
 var len = value.length;
 for ( var i = 0; i < len; i++) {
  if (value.charAt(i) > "9" || value.charAt(i) < "0") {
   alert("含有非数字字符");
   eleText.focus();
   break;
  }
 }
}
</script>

 </head>

 <body>
  <center>

   <input type="text" id="d1" onblur=" chkNumber (this)" />

  </center>
 </body>
</html>

 

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">

  <title>检查输入框输入的是否都是数字</title>

  <script type="text/javascript">

function chkNumber(eleText) {
 var value = eleText.value;
 var len = value.length;
 for ( var i = 0; i < len; i++) {
  if (value.charAt(i) > "9" || value.charAt(i) < "0") {
   alert("含有非数字字符");
   eleText.focus();
   break;
  }
 }
}
</script>

 </head>

 <body>
  <center>

   <input type="text" id="d1" onblur=" chkNumber (this)" />

  </center>
 </body>
</html>

 

判断文本框中输入的是否为数字，不是则清除
naruto517308294的专栏
10-17 1155
正则表达式验证输入框是否为数字
czs1012的专栏
12-02 8570
正则表达式1 首先这是个正则式验证，用来验证输入值的规则； 当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符； 此句功能为：将输入值为非数字的字符替换为空； 正则表达式2 中/[^0-9]/g这里的g是何含义？onafterpaste有何用途？ 1./[^0-9]/g是正则表达式，这里加g是表示会替换字符串中
对输入框进行输入的时候有时候需要判断输入的是不是数字或者不只让他输入数字
longzaiy的博客
03-21 316
代码 onchange="if(/[^\d.]/g.test(this.value)){alert('只能输入数字');this.value='';}" 示例 个数                                                                                    价格                   
判断输入框输入是否是数字
ASshowmeinchina的博客
06-01 573
&lt;html&gt; &lt;head&gt; &lt;title&gt;测试数字&lt;/title&gt; &lt;script&gt; function onCheck(){ var numValue=document.getElementById("num").value; var index=-1; for(var i=0;i&lt;numValue.leng..
表单提交get/post,提交文件
weixin_42666092的博客
05-07 748
1.表单提交数据GET/POST方法 GET数据：form表单提交的时候，提交方式是get，数据在url进行传输 例如 http://127.0.0.1/php/13get.php?username=18595907951&sex=女 只能提交的文本数据，安全性差，提交的数据量小 POST请求：form表单提交的时候，提交方式是post，post能提交更多的数据，并且安全性高 get请求会把数据提交的php的$_GET数组里面，同时也
解析使用js判断只能输入数字、字母等验证的方法(总结)
10-27
- 第一个输入框使用`isNaN(value)`函数判断输入值是否为数字，如果不是则撤销操作。 - 第二个输入框使用`onchange`事件检测变化，并使用正则表达式`\D`检查是否存在非数字字符。 3. **数字与小数点更复杂的验证**...
js判断文本框输入的内容是否为数字
10-23
其中，验证文本框输入内容是否为数字是一个常见的需求，例如手机号码、邮编或用户年龄等信息通常只允许输入数字。本文将详细介绍如何使用JavaScript来实现这一功能，并提供相关的正则表达式和示例代码。 ### 验证...
Js检测判断URL网址输入是否正确
10-28
在探讨如何使用JavaScript来检测用户输入的URL网址是否正确之前，我们首先要了解URL的结构和一些基本概念。统一资源定位符（Uniform Resource Locator），通常简称为URL，是指网络上用来定位资源的引用路径。一个...
检查输入的是否是数字使用keyCode配合onkeypress事件
09-04
在网页开发中，有时我们需要确保用户在特定的输入框中只能输入数字，以满足特定的业务需求或数据格式。在这种情况下，我们可以利用JavaScript事件监听器和键盘事件来实现这一功能。本文将详细介绍如何使用`keyCode`...
非正则实现的只能输入汉字的输入框
01-21
输入验证是确保用户输入数据符合预定格式的过程，它可以阻止错误数据的提交，提高应用程序的健壮性和用户体验。在本例中，我们的目标是创建一个不通过正则表达式而只能输入汉字的输入框，这通常涉及到对键盘输入事件...
PLSQL编程详解，详细的例程加讲解
09-11
PLSQL编程详解，超级详细的例程加讲解
在前端判断输入的密码是不是由数字和密码组合
zghjknasdb的博客
07-29 650
var zhengze = /^(\w){6,12}$/; var ueser = 'sdasd123'; if(!reg.test(password)){ alert('密码必须由6-12位数字或者字母组成'); }
js如何验证用户输入的只能是数字？
weixin_34321753的博客
08-12 2230
方法一如果判断输入的是否是数字，如果不是数字弹出一个提示：简易代码如下：<body><inputtype="text"id="inp"></table></body><script> varoInp=document.getElementById('inp'); oInp.onblur=function(){ if(isNaN...
判断文本框输入内容是否为数字，
u011239610的专栏
10-03 8536
2.html --> function ischeckNum() { var num = document.getElementById('isnum').value; if( num ) { if( !isNaN( num ) ) { alert('是数字'); return false;
GET获取表单数据的方法
Qyingya的博客
05-01 2542
两种最常被用到的方法是：GET 和 POST。 关于GET请求： GET请求可被缓存 ，GET 请求保留在浏览器历史记录中 ，GET 请求可被收藏为书签 ，GET 请求不应在处理敏感数据时使用 ，GET 请求有长度限制 ，GET 请求只应当用于取回数据 关于POST请求： POST 请求不会被缓存 ，POST 请求不会保留在浏览器历史记录中 ，POST 不能被收藏为书签 ，POST 请求对数据长度没有要求 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表...
JS判断文本框中输入内容是否为数字
biledoudou的博客
03-09 1万+
初学JS，写的第一个例子，直接上代码： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;amp;g
判断input输入的是否是数字
打字员blog
11-15 4755
本来想总结下，数字输入验证的，却没成想，一脚一个坑。。。没有能根治的方法。。。 不管如何，还是总结下常用的几种方法吧~~~ html5中表单input，拥有一些新的输入属性，极大方便了我们开发过程中的一些表单验证。但是由于浏览器的兼容性，其有存在着一些不完美。 从下图中，我们可以看到，并不是所有的浏览器都支持新的属性。那么对于需要兼容火狐或者ie的项目来说，我们需要进行一些拓展。 基于该目标：判断...
jsp中表单提交注册信息，提交信息之前先进行正则匹配，验证用户输入的信息是否符合规范要求。
热门推荐
凌世宇
05-30 4万+
  今天写了一个jsp的注册页面，用户每次输完一个输入框的内容，就会进行验证用户输入信息的格式是否符合规范，符合规范之后表单才进行提交，不符合规范则提醒用户按要求输入信息。直到用户输入的每个信息都符合要求，表单才提交，才进行验证。避免了提交之后，我还需要对信息提前进行一定的判断，是否符合要求，才进行数据库的插入操作。  说了这么多，还是先说一说我的思路吧。  1.首先我的页面有五个框，第一个框是用...
输入框中判断是折扣的最大只能输入10折
最新发布
03-18
<think>好的，我现在需要帮助用户解决如何在输入框中设置折扣最大值为10折的验证规则。首先，我需要理解用户的需求。用户提到之前做过充值和提现金额的输入框，现在需要处理折扣输入，最大值设为10折。这可能涉及到前端验证和后端验证的结合，但用户可能主要关注前端实现。 首先，我应该考虑HTML和JavaScript的常用方法。通常，输入框的验证可以通过HTML5的属性如max、min来实现，但需要确认是否支持小数。用户需要的是10折，也就是最大值为10.00，可能允许两位小数。这时候，使用input元素的type="number"并设置max="10"和step="0.01"可能有效，但需要测试一下浏览器的兼容性。 然后，用户可能需要更严格的客户端验证，比如实时检查输入值是否超过10。这时候需要用JavaScript来增强验证。例如，在输入事件或提交表单时检查输入值，如果超过10，就提示错误并重置为最大值。另外，需要考虑用户可能的输入方式，比如粘贴、拖放等，确保这些情况下也能触发验证。 接下来，参考用户提供的引用，特别是引用[1]中提到的小数点后两位的处理，可能需要结合正则表达式来验证格式。例如，使用正则表达式确保输入的是数字，并且最多两位小数。同时，设置最大值为10.00。 还需要考虑用户体验，比如在输入错误时给出即时反馈，而不是等到表单提交。这可能涉及到监听input或change事件，并更新提示信息。此外，防止用户输入非数字字符，可以通过阻止无效按键事件来实现。 另外，后端验证也是必须的，不能仅依赖前端，因为前端验证可能被绕过。所以，在服务器端也需要检查折扣值是否有效，确保数据的安全性。 现在，综合这些思路，应该分步骤给出解决方案：首先使用HTML属性进行基本限制，然后用JavaScript加强验证，最后提到后端验证的重要性。同时，需要提供代码示例，并解释各部分的作用。最后，生成相关问题，帮助用户扩展了解相关验证方法。</think>### 分步解决方案 1. **HTML属性限制基础范围** 使用`type="number"`的输入框，通过`max`属性设置最大值为10，`step`属性定义最小步长（如允许两位小数则设为0.01）： ```html <input type="number" id="discount" name="discount" min="0" max="10" step="0.01" placeholder="请输入折扣"> ``` 此方法可限制用户通过输入框箭头调整值的范围，但需注意浏览器兼容性[^1]。 2. **JavaScript实时校验** 监听输入事件，在输入时强制修正超限值： ```javascript document.getElementById('discount').addEventListener('input', function(e) { let value = parseFloat(e.target.value); if (value > 10) { e.target.value = 10; // 自动修正为最大值 alert("折扣最大值为10折"); // 或显示更友好的提示 } }); ``` 3. **正则表达式格式校验** 结合正则表达式验证数字格式（如两位小数）： ```javascript function validateDiscount() { const input = document.getElementById('discount').value; const regex = /^\d+(\.\d{1,2})?$/; // 允许整数或两位小数 if (!regex.test(input) || parseFloat(input) > 10) { return false; } return true; } ``` 4. **表单提交最终校验** 在表单提交时进行最终验证： ```javascript document.querySelector('form').addEventListener('submit', function(e) { if (!validateDiscount()) { e.preventDefault(); alert("请输入有效的折扣值（0-10，最多两位小数）"); } }); ``` 5. **后端双重验证（必选）** 前端验证可能被绕过，需在后端添加校验逻辑（以Python为例）： ```python discount = float(request.POST.get('discount')) if discount < 0 or discount > 10: raise ValidationError("折扣值必须在0-10之间") ``` ### 完整代码示例 ```html <input type="number" id="discount" min="0" max="10" step="0.01" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46"> <script> document.getElementById('discount').addEventListener('input', function(e) { let value = parseFloat(this.value) || 0; if (value > 10) { this.value = 10; this.setCustomValidity('超过最大折扣值'); } else { this.setCustomValidity(''); } }); </script> ``` ### 关键注意点 - 通过`step="0.01"`实现小数点控制 - `setCustomValidity()`方法可配合HTML5表单验证API - 键盘事件拦截可阻止非数字输入（示例中的`onkeypress`事件）
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值