CODEWITHSUNDEEP
javascriptregex
Khaled
Khaled

Reputation: 55

How do i allow only one (dash or dot or underscore) in a user form input using regular expression in javascript?

I'm trying to implement a username form validation in javascript where the username

example of a valid username: the_user-one.123
example of invalid username: 1----- user

i've been trying to implement this for awhile but i couldn't figure out how to have only one of each allowed symbol:-

const usernameValidation = /(?=^[\w.-]+$)^\D/g 
console.log(usernameValidation.test('1username')) //false
console.log(usernameValidation.test('username-One')) //true

Upvotes: 2

Views: 1047

Answers (3)

Carsten Massmann
Carsten Massmann

Reputation: 28196

I have to admit that Bobble bubble's solution is the better fit. Here ia a comparison of the different cases:

console.log("Comparison between mine and Bobble Bubble's solution:\n\nusername             mine,BobbleBubble");
["valid-usrId1","1nvalidUsrId","An0therVal1d-One","inva-lid.userId","anot-her.one","test.-case"].forEach(u=>console.log(u.padEnd(20," "),chck(u)));


function chck(s){
  return [!!s.match(/^[a-zA-Z][a-zA-Z0-9._-]*$/) && ( s.match(/[._-]/g) || []).length<2, // mine
  !!s.match(/^(?!\d|.*?([_.-]).*\1)[\w.-]+$/)].join(","); // Bobble bulle
  
}

The differences can be seen in the last three test cases.

Upvotes: 2

bobble bubble
bobble bubble

Reputation: 18490

How about using a negative lookahead at the start:

^(?!\d|.*?([_.-]).*\1)[\w.-]+$

This will check if the string

See this demo at regex101 (more explanation on the right side)

Upvotes: 3

starball
starball

Reputation: 50412

Preface: Due to my severe carelessness, I assumed the context was usage of the HTML pattern attribute instead of JavaScript input validation. I leave this answer here for posterity in case anyone really wants to do this with regex.

Although regex does have functionality to represent a pattern occuring consecutively within a certain number of times (via {<lower-bound>,<upper-bound>}), I'm not aware of regex having "elegant" functionality to enforce a set of patterns each occuring within a range of number of times but in any order and with other patterns possibly in between.

Some workarounds I can think of:

Make a regex that allows for one of each permutation of ordering of special characters (note: newlines added for readability):

^(?:
(?:(?:(?:[A-Za-z][A-Za-z0-9]*\.?)|\.)[A-Za-z0-9]*-?[A-Za-z0-9]*_?)|
(?:(?:(?:[A-Za-z][A-Za-z0-9]*\.?)|\.)[A-Za-z0-9]*_?[A-Za-z0-9]*-?)|
(?:(?:(?:[A-Za-z][A-Za-z0-9]*-?)|-)[A-Za-z0-9]*\.?[A-Za-z0-9]*_?)|
(?:(?:(?:[A-Za-z][A-Za-z0-9]*-?)|-)[A-Za-z0-9]*_?[A-Za-z0-9]*\.?)|
(?:(?:(?:[A-Za-z][A-Za-z0-9]*_?)|_)[A-Za-z0-9]*\.?[A-Za-z0-9]*-?)|
(?:(?:(?:[A-Za-z][A-Za-z0-9]*_?)|_)[A-Za-z0-9]*-?[A-Za-z0-9]*\.?)
)[A-Za-z0-9]*$

Note that the above regex can be simplified if you don't want usernames to start with special characters either.

Friendly reminder to also make sure you use the HTML attributes to enforce a minimum and maximum input character length where appropriate.

If you feel that regex isn't well suited to your use-case, know that you can do custom validation logic using javascript, which gives you much more control and can be much more readable compared to regex, but may require more lines of code to implement. Seeing the regex above, I would personally seriously consider the custom javascript route.

Note: I find https://regex101.com/ very helpful in learning, writing, and testing regex. Make sure to set the "flavour" to "JavaScript" in your case.

Upvotes: 2

Related Questions