CODEWITHSUNDEEP
javascriptreactjsregexformik
Joseph
Joseph

Reputation: 7785

Validating Telephone Number in RegEx in React

I'm trying to validate this kind of phone number in regEx in React (044) 456-7890.

Check codesanbox here CLICK HERE

Code

const telRegExp = "(d{3})s*d{3}-d{4}";

let validateSchema = yup.object().shape({
  tel_no: yup.string().matches(telRegExp, "Telephone number is invalid")
});




  <InputMask
      mask="(999) 999 - 9999"
      onChange={handleChange}
      onBlur={handleBlur}
    >
     {() => (
       <TextField
         label="Telephone Number (Ex: (044) 878 - 3900)"
         name="tel_no"
         fullWidth
         variant="outlined"
         helperText={touched.tel_no ? errors.tel_no : ""}
         error={touched.tel_no && Boolean(errors.tel_no)}
       />
     )}
  </InputMask>

Upvotes: 0

Views: 11081

Answers (3)

wookieb
wookieb

Reputation: 4499

I guess it would be better to use a real phone checking library like: https://github.com/catamphetamine/libphonenumber-js

Upvotes: 0

rootkonda
rootkonda

Reputation: 1743

^\(\d{3}\)\s\d{3}-\d{4}$

This matches the given format exactly

https://regex101.com/r/HBvG3K/6

\( and \) - To escape () characters and match literally  
\s - space character. If there can be more or no spaces then add * next to \s
\d{} - decimal numbers(0-9) followed by quantifier.

let validateSchema = yup.object().shape({
  tel_no: yup
    .string()
    .matches(
      /^\(\d{3}\)\s\d{3}\s-\s\d{4}/g,
      "Telephone number is invalid"
    )
});

Upvotes: 2

Tim Biegeleisen
Tim Biegeleisen

Reputation: 522762

To validate the exact number format (044) 456-7890 I would suggest:

\(\d{3}\)\s*\d{3}-\d{4}

Demo

Upvotes: 0

Related Questions