javascript regex (username validation)

Question

I want to enforce that

the input firstname should only contains characters A-Z, a-z, and -
the input login name should only contains alphanumeric characters

How do I restrict the two rules in javascript?

Below is my code (jsp) for username regex. But it's not working properly.

function validateForm(){
    var nameRegex = /^[a-zA-Z\-]+$/;
    var validfirstUsername = document.frm.firstName.value.match(nameRegex);
    if(validUsername == null){
        alert("Your first name is not valid. Only characters A-Z, a-z and '-' are  acceptable.");
        document.frm.firstName.focus();
        return false;
    }
}

Thanks!

What's the difference between username and login? Furthermore, what's wrong with what you have (other than inconsistent naming)? — Jason McCreary
– Jason McCreary, Commented Mar 9, 2012 at 4:21
@JasonMcCreary One is firstname and the other is login name. Using above code, if I use horatio2m as firstname input, the user can still be saved, which is not what I want. I want to validate that the firstname input should only contains a-z,A-Z,and - — horatio.mars
– horatio.mars, Commented Mar 9, 2012 at 4:26
Replace if(validUsername == null){ with if(validfirstUsername == null){. — Josh
– Josh, Commented Mar 9, 2012 at 4:28
The real problem here is that a user can simply turn off javascript and submit whatever username they want. please validate this on the backend, too. — Alexander Corwin
– Alexander Corwin, Commented Mar 9, 2012 at 21:43

Jason McCreary · Accepted Answer · 2012-03-09 04:30:50Z

36

The code you have looks fine, aside from the inconsistent variable reference (see the comment by Josh Purvis).

The following regex is fine for your first name spec:

var nameRegex = /^[a-zA-Z\-]+$/;

Adding digits for your username check is straightforward:

var usernameRegex = /^[a-zA-Z0-9]+$/;

Note: There are many ways to write regular expressions. I've chosen to provide a version that matches what you started with. I encourage you to work through this Regular Expression Tutorial

answered Mar 9, 2012 at 4:30

Jason McCreary

73.3k23 gold badges140 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

horatio.mars Over a year ago

Can I use /[a-zA-Z\-]/ instead of /^[a-zA-Z\-]+$/ ? Why we need to use ^ in front of [a-zA-Z\-]?

Neo Over a year ago

^ means Matches the starting position within the string

Josh Over a year ago

^ means the beginning of the string. $ means the end. If you left off the ^, for example, ~@*##@horatio would pass your validation. Likewise for the $ and the end of the string being checked.

metamlkshk Over a year ago

I would like to point out that this allows 12345 to pass as a valid username. How would you make sure there's at least one letter?

Ben Winding · Accepted Answer · 2021-05-30 06:17:24Z

10

Here's the validation function I came up with, tailor it for your own use-cases:

function isUserNameValid(username) {
  /* 
    Usernames can only have: 
    - Lowercase Letters (a-z) 
    - Numbers (0-9)
    - Dots (.)
    - Underscores (_)
  */
  const res = /^[a-z0-9_\.]+$/.exec(username);
  const valid = !!res;
  return valid;
}

answered May 30, 2021 at 6:17

Ben Winding

12k5 gold badges92 silver badges80 bronze badges

Comments

Amir · Accepted Answer · 2022-01-28 17:09:28Z

9

Usernames can only use letters, numbers, underscores, and periods.

  const onValidUsername = (val) => {
    const usernameRegex = /^[a-z0-9_.]+$/
    return usernameRegex.test(val)
  }

answered Jan 28, 2022 at 17:09

Amir

4795 silver badges5 bronze badges

Collectives™ on Stack Overflow

javascript regex (username validation)

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related