Using a Regex to Allow Only Numbers in input type = "text"

Today at work, while validating an input that takes a car's paint film thickness, I had the following conditions.

The number of digits (length) is 5 or fewer
No e (exponent), letters, or .

Validating an input of type number against these conditions seemed tricky, so I set the input type to text.

I used maxLength for the maximum string length and a regular expression for the other conditions.

At work I implemented it with jsp + vue.js, but I can't share company code, so I reviewed it on my own at home using React.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32import React, { useState } from "react";

const YourComponent = () => {
  const [inputValue, setInputValue] = useState("");

  const handleInputValue = (e: React.ChangeEvent<HTMLInputElement>) => {
    // const validInputValue = e.target.value.toString().split('').map((str)=>{
    //   if(!isNaN(str) && str !== '.' && str !=='e'){
    //       return str
    //   }
    // }).join('')

    const validInputValue = e.target.value.replace(/[^0-9]/g, "");
    setInputValue(validInputValue);
  };

  return (
    <>
      <input
        type="text"
        maxLength={5}
        name="test"
        id="test"
        value={inputValue}
        onChange={(e) => handleInputValue(e)}
      />
      <button type="submit">제출</button>
    </>
  );
};

export default YourComponent;

The regex that allows only numbers is below. When I implemented this before, I went through the characters one by one with the split() method and validated them myself, but using the replace() function with a regex made it simple to implement.

1const validInputValue = e.target.value.replace(/[^0-9]/g, "");

Below is the implemented screen.

Using a Regex to Allow Only Numbers in input type = "text"

More in Work