admin管理员组

文章数量:1356104

I have a Reactjs-site where I use Formik and Yup to validate fields in the registration flow. Since I don't want to allow Japanese characters or any special characters but only the extended latin alphabet (so that users can use A-Z, a-z but also use e.g. ÅÄÖÛ).

.matches(
        /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/gi,
            'Name can only contain Latin letters.'
        )

This works great, but I also want the user to enter a minimum of at least 2 names. I know you can chain in Yup so i guess another .matches() with some regex in it or some other Yup rule but I can't seem to find excactly what I'm looking for...

Thanks in advance! <3

Update!

This is the answer from Phan that I probably will end up using:###

.matches(
    /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/gi,
        'Name can only contain Latin letters.'
    )
.matches(/^\s*[\S]+(\s[\S]+)+\s*$/gms, 'Please enter your full name.')

This is another solution that I found also worked for me:

.matches(
    /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/g,
    'Name can only contain Latin letters.'
)
.matches(
    /^(?:([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)) (?:([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*))$/g,
    'Please enter your full name.'
)

I have a Reactjs-site where I use Formik and Yup to validate fields in the registration flow. Since I don't want to allow Japanese characters or any special characters but only the extended latin alphabet (so that users can use A-Z, a-z but also use e.g. ÅÄÖÛ).

.matches(
        /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/gi,
            'Name can only contain Latin letters.'
        )

This works great, but I also want the user to enter a minimum of at least 2 names. I know you can chain in Yup so i guess another .matches() with some regex in it or some other Yup rule but I can't seem to find excactly what I'm looking for...

Thanks in advance! <3

Update!

This is the answer from Phan that I probably will end up using:###

.matches(
    /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/gi,
        'Name can only contain Latin letters.'
    )
.matches(/^\s*[\S]+(\s[\S]+)+\s*$/gms, 'Please enter your full name.')

This is another solution that I found also worked for me:

.matches(
    /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/g,
    'Name can only contain Latin letters.'
)
.matches(
    /^(?:([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)) (?:([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*))$/g,
    'Please enter your full name.'
)

• javascript
• reactjs
• regex
• formik
• yup

Share Improve this question Follow edited Mar 29, 2021 at 7:02 Joel 8 bitar asked Mar 26, 2021 at 12:41 Joel 8 bitarJoel 8 bitar 12311 gold badge33 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Because you have already matched out non-Latin letters, you only need to use the non-space tag \S instead of the word tag \w for the second validation.

.matches(
        /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s]*)$/gi,
            'Name can only contain Latin letters.'
        )
.matches(/^\s*[\S]+(\s[\S]+)+\s*$/gms,'Please enter your full name.')

Regex Demo

The reason why the current regex isn't working:

/(\w.+\s).+/gi

• It matches a word
• followed by any character (1 or more)
• followed by a whitespace character
• followed by any character (1 or more)

Since the input Åäö doesn't contain a valid word character (according to regex), it already fails due to the first rule.

Åäö Jonsson does not match since it fails the first and second rule as well

Åäölam Jonsson does pass the regex, but it is only matched on the following phrase: lam Jonsson.

Since you are only interested in detecting if there are any Japanese characters, change the regex to validate the input differently. This regex will test the input and will fail if there are Japanese characters in the string (

/^[^\u4E00-\u9FBF\u3040-\u309f\u30A0-\u30FF]+$/

See the regex in action here.

The solution as stated will not work for hyphenated names or the poor Irish and Italian folks etc. who have apostrophes in their names. There are likely other little oddities in naming that will need to be added but those are a couple of obvious ones.

I added support for hyphens and apostrophes ... you can do more to restrict where and how many of them appear in the name but this is just indicating they are legal characters.

In addition, the '*' means 0 or more matches and perhaps you meant to use '+' 1 or more matching characters.

const latinCharsRegEx = /^([A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff\s\'\-]*)$/gi;

本文标签：