在格式化数字输入时验证数字输入 [英] Validating numeric input while formatting numeric input

问题描述

在一个使用C＃的asp.net-mvc项目中。

我用一个函数来格式化大数字，比如 1,000,000 ，感谢这篇文章：

  function numberWithCommas（str）{
 return str.toString（）。replace（/ \B（？=（\d {3}） +（？！\d））/ g，，）; 
 
 
 
 
 
 $ p 
问题是，我锁定输入只接受数字最小值为零。 
 
 
 < input type =numbermin =0class =myclassvalue = @somevalue/> 
  
使用JS会产生问题，因为它只需要输入数字。这使我想到了这样的问题如何使HTML输入标签只接受数值？，这也提供了JS解决方案。
 
 
我想知道是否有人开发了一种优雅的方式来格式数字输入显示在验证数字输入的同时，还有其他选项可用吗？它不必纯粹是一个JS解决方案。
解决方案
您不能使用数字输入，因为，JavaScript不考虑格式化的数字是一个数字。
 
 
 
该选项是使用非数字输入，但过滤掉任何有问题
 
 
 
在下面的例子中，我也在处理点分隔符，以防你需要接受分数。
 
 
正在编辑文本框时，还必须保留光标位置。我已经在的帮助下实现了它。更新输入值不失光标位置。
 
 
 
 
 
 
  function format（inp）{var start = inp.selectionStart，//得到选择开始结束= inp.selectionEnd; //结束，根据链接的帖子var s1 = inp.value.split（，）。length-1; //编辑之前的逗号inp.value = numberWithCommas（inp.value.replace（/，| [^ \ d。] / g，''））; var s2 = inp.value.split（，）。length-s1-1; //计算编辑后的逗号，以便知道光标所在的位置，当位置发生变化时，如果有新的逗号或某些逗号已经被移除，则返回inp.setSelectionRange（start + s2，end + s2）; //设置选择开始和结束，根据链接的帖子}函数numberWithCommas（str）{var a = str.split（'。'）; var p = / \ B（？=（\ d {3}）+（？！\d））/ g; if（a.length> 1）return a [0] .toString（）。replace（p，，）+。+ a [1]; else return str.toString（）。replace（p，，）;}  

 < input onkeyup =format（this）>  

In an asp.net-mvc project using C#.

I use a function to format larger numbers with commas such as 1,000,000, thanks to this post:

function numberWithCommas(str) {
    return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

The issue is, I have the inputs locked down to accept only numbers with a min value of zero.

<input type="number" min="0" class="myclass" value="@somevalue" />

This poses a problem using the JS, as it needs only number input. Which brings me to a question like this How to make HTML input tag only accept numerical values?, which also offers a JS solution.

I'm wondering if anyone has developed an elegant way to format numeric input display, while validating numeric input, is there are any other options available here? It doesn't have to purely be a JS solution.

解决方案

You can't use the numeric input, because, well, JavaScript doesn't consider formatted number to be a number.

The option is to use the non-numeric input but filter out any "problematic" chars.

In the following example, I'm also handling the dot separator in case you need to accept fractions.

As the text box is being edited, it also has to preserve the cursor position. I've achieved it there with the help of Updating an input's value without losing cursor position.

function format(inp){
  var start = inp.selectionStart,  // get the selection start
      end   = inp.selectionEnd;    // and end, as per the linked post
  var s1=inp.value.split(",").length-1; //count the commas before edit
  inp.value=numberWithCommas(inp.value.replace(/,|[^\d.]/g,''));
  var s2=inp.value.split(",").length-s1-1; //count the commas after edit so as to know where to place the cursor, as the position changes, if there are new commas or some commas have been removed
  inp.setSelectionRange(start+s2, end+s2); // set the selection start and end, as per the linked post
}
function numberWithCommas(str) {
  var a=str.split('.');
  var p=/\B(?=(\d{3})+(?!\d))/g;
  if(a.length>1)
    return a[0].toString().replace(p, ",")+"."+a[1];
  else 
    return str.toString().replace(p, ",");
}

<input onkeyup="format(this)">

这篇关于在格式化数字输入时验证数字输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！