Question

我正在使用react并不想格式化和验证输入值。

我的用例是：

输入中的

1-将仅允许写入数字和点[。]。 2-值最大为1000 3-如果用户将编写例如：

如果 200将是200.00

如果 99将会是99.00

如果10000 这将是1000.00

如果 22222 将会是222.22

并且我需要防止写两个点，因此只有一个点和最后一个值之前。

我尝试什么？

onKeyPress函数：

onKeyPress={e => {
            const BIRTHNUMBER_ALLOWED_CHARS_REGEXP = /^[0-9.]*$/;
            if (!BIRTHNUMBER_ALLOWED_CHARS_REGEXP.test(e.key)) {

              e.preventDefault();
            }
          }}

通过这种方式，我可以防止点和数字以外的任何字符。但是在另一个用例中，我不知道如何解决

Answer 1

总是最好将验证委派给特定的库，例如Yup或其他一些库。

您的问题可以分为两个问题：验证然后格式化。

您可以轻松地验证字符串是浮点数。浮点数仅包含数字和一个点（最多一个）。

const isAFloat = str => str.split('').filter(char => char !== '.').every(char => !Number.isNaN(parseInt(char))) && 
str.indexOf('.') === str.lastIndexOf('.')

格式化然后可以执行的浮动，这将为您提供所需的格式

parseFloat(str,10).toFixed(2)

如何使用JavaScript格式化货币并验证

1 个答案: