我尝试验证不应允许任何字符串的文本框

【问题标题】：I try to validate a textbox that it should not allow any string我尝试验证不应允许任何字符串的文本框
【发布时间】：2021-03-03 10:10:52
【问题描述】：

我正在尝试验证用户应仅在文本框中键入数字的文本框。这是我的代码

import { useState } from "react";

export default function App() {
  const [phoneNumber, setPhoneNumber] = useState(null);
  const handleOnChange = (val) => {
    if (!isNaN(val)) {
      setPhoneNumber(val);
    }
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input
        type="text"
        value={phoneNumber}
        onChange={(e) => handleOnChange(e.target.value)}
      />
    </div>
  );
}

https://codesandbox.io/s/kind-moon-x6il3?file=/src/App.js:0-513 如果我们从它没有验证的字符串开始，它允许您输入字符串。如果我们从数字开始，它工作正常。如果我将输入类型更改为数字，我将面临字符 e 的一些问题。如何解决这个问题？

【问题讨论】：

您好，您是否尝试过将您的电话号码的初始值更改为空字符串“”而不是 null？

标签： javascript reactjs regex

【解决方案1】：

将useState中phoneNumber的初始值从null改为空字符串，就可以正常工作了。 sandbox

【讨论】：

这不是一个非常强大的解决方案。以这种方式验证电话号码会导致奇怪的行为。例如，尝试输入123456789，然后注意在7 和8 之间输入e+，在1 和2 之间输入.，并在-号码的开头。这是一个有效的浮点数，但它看起来不像我见过的任何电话号码。有libraries for this sort of thing。我看不出重新发明这个轮子有什么意义。