We Keep Coding

Regex Behaves Differently on HTML Pattern than on an Express Backend

I have the following regex pattern on an HTML input field, which is supposed to hold an email address:
<input type="text" pattern="^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$" /><br>
I furthermore have the same regex on an Express (JavaScript) backend using the following:
var re-email = new RegExp("^\w+([.-]?\w+)*#\w+([.-]?\w+)*(\.\w{2,4})+$")
if (!re-email.test(email)) {
validation = false
}
Although the regex are exactly the same, a specific test input is evaluated as true on the front-end while as false on the backend.
Why is this?
Solution (found after the initial post):
Instead of using "new RegExp" (which is not working) as above, include the Regex within forward slashes as below (which works).
var re-email = /^\w+([.-]?\w+)#\w+([.-]?\w+)(.\w{2,4})+$/

Probably not the answer you are after (not vue.js specific)...
Email address input validation should usually be completed like so:
<input type="email" name="" value="" required />
Specifying the correct "type" to an input field also adjusts input keyboards on mobile devices to make inputting an email address easier.
Your regular expression is poorly written and leads to "catastrophic backtracking" as well as not actually supporting valid email addresses.
Email address validation is generally complex, see this answer and associated question:
https://stackoverflow.com/a/201378/406712
You can also find the HTML email address validation equivalent regular expression in the HTML spec:
https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
Also note you failed to escape the characters in the string, the first instance being the \w which without escaping the \ will appear as simply w.
Escaped the string it more like this:
'/^\\w+([.-]?\\w+)#\\w+([.-]?\\w+)(.\\w{2,4})+$/'

Validate HTML form entries with Regex Patterns

I currently use a regex pattern that prevents = being used in form entries. I wish to extend this to only allow form entries in this fields from certain urls? How can I add a wildcard domain regex entry AND maintain using the other = pattern?
<input name="url" pattern="[^=]+" type="url" placeholder="Amazon URL" required>
VALID ENTRIES
https://www.amazon.co.uk/dp/B01DFKBL68
https://www.amazon.co.uk/dp/B07H3NY1H6/
https://www.amazon.co.uk/b/ref=footer_topup_uk?ie=UTF8&node=13958953031&tag=deals70-21
INVALID ENTRIES
https://www.amazon.com/Disc-O-Bed-Large-with-Organizers-Black/dp/B01GSA9O3O
https://www.google.com
Here is what I have so far, which isn't working:
pattern="[^=|https://www.amazon.co.uk/*]+"

You may use
pattern="(?!https://www\.amazon\.co\.uk/)[^=]+"
The HTML5 pattern regex is automatically put inside ^(?: and )$, so it will look like ^(?:(?!https://www\.amazon\.co\.uk/)[^=]+)$:
^(?: - start of string and of a non-capturing outer container group
(?!https://www\.amazon\.co\.uk/) - the string cannot start with https://www.amazon.co.uk/
[^=]+ - one or more chars other than =
)$ - end of the non-capturing group and the end of the string.

Textbox to accept only one #

I'm creating an email field in my html, can I only accept one #?
For example email:
chong!#$#gmail.com - should invalid because of there are others special characters included
or
ch#ng#gmail.com - should also be invalid because there are two #'s.
The only accepted special character should only be one #, how do I do this in javascript/jquery?
Sorry I really don't know much in regex. Or is there another way to validate an email format?

You can use the following regex in your input:
<input type="email" pattern="[a-zA-Z0-9.]+\#[a-zA-Z0-9.]+\.[a-zA-Z]+" />

This pattern avoid the user input an 'email' that don't fits with the email standard but also avoid limited the number of characters input in the name of user to 64 characters and the number of characters in the domain too.
^[A-Z0-9._%+-]{1,64}#(?:[A-Z0-9-]{1,63}.){1,125}[A-Z]{2,63}$
Some other patterns for validate numbers, numbers and letters and just letters:
^[0-9]+$
^[a-zA-Z0-9]+$
^[a-zA-Z]+$
Also you can use regular expression with javascript like this
Validate email address in JavaScript? and this other page its really useful for check if your regex pattern works correctly
http://regexr.com/

Try using this. It will open up a popup explaining the error if format is incorrect:
<form>
<input pattern="[a-zA-Z0-9.]+\#[a-zA-Z0-9.]+\.[a-zA-Z]+" title="Write your error here" />
<input type="submit" />
</form>
Hope this helps.

regex (javascript) allow \w but not a single specified word

I've been banging my head against the wall and trying to google a solution for several hours with my "problem".
I need a javascript (html5 input) regex pattern, in a registration form which hasn't been submitted yet, which allows normally: ^[\w]+$ but after a submit, if the page which processes the post finds that username is already been taken, takes user back to the registration form (which is now pre-filled with the values he/she typed).
This time that "username" input field should have a pattern which don't allow user to type that same username again, but everything else will do fine.
I've played around on http://regex101.com/#javascript and came up with 100% the opposite I wanted:
^(?=[\w]*)test(?=[\w]*)$
I've been testing my pattern with string:
abctestabc
test
dfea
atest
testa
Regex I'm trying to obtain should match on everything else on my testing string, except for "test" and my pattern matches ONLY for that one.
Second pattern I came up with (which I shortly thought was what I wanted) was:
^(?:([\w]+test[\w]+)|([\w]+test|(test[\w]+)))$
..but didn't take long since I noticed that this only allows user to input:
*test
*test*
test*
..but nothing without "test" included.
First time on form:
<input type="text" name="username" pattern="^[\w]+$" />
Secound time should be:
<input type="text" name="username" pattern="**PATTERN HERE**" value="test" />
So please Stackoverflow, Pimp my regex!

user3548238, do you mean this?
^(?!test$)\w+$
This pattern will allow \w+, like before, but it will not allow "test".
This is accomplished with a lookahead.

Why don't you start pimping here ?
http://www.infotuts.com/live-username-availability-checker-and-password-strength-indicator-with-jquery-and-ajax/
DEMO

Validate File Type using Foundation Abide

I'm looking to use Foundation's Abide plug-in to validate the type of file extension uploaded into a type="file" input tag, but I'm having troubles validating the check against the RegExp correctly.
html:
<div class="large-2 columns button">
<input id="uploadResume" type="file" required pattern="resume" />
<small class="error">PDF or Word Document only please</small>
</div>
javascript:
$(document)
.foundation().foundation('abide', {
patterns: {
// check if the last 3 letters are acceptable
resume: /^.(doc|DOC|pdf|PDF)*$/
}
});

For now you are trying to match any one character followed by the mentioned extenions, so try this pattern:
PATTERN
/\.(doc|DOC|pdf|PDF)$/
It will match only dot followed by any of mentioned extensions, so the possibilities will be:
.doc
.DOC
.pdf
.PDF
But if you want to match whole filename + extension use this:
PATTERN
/^.+?\.(doc|DOC|pdf|PDF)$/
Added .+? after ^ which means 'match any character except new line 0 or more times until satisfying the next token, added also \. to match a dot before extenion. I also removed * which is not needed and would cause repeating extenions.
Examples
filename.PDF
This file will be matched.
filename.exe
This will be not matched.
FINAL ANSWER
Using 2nd pattern as inline pattern:
<input type="file" required pattern="^.+?\.(doc|DOC|pdf|PDF)$" />.
Apparently there is some issue while using inline patterns which forces you to remove the forward slashes both at the beginning of the pattern and at the end of it. Also the named patterns seem to work well weird and I'm not surely why is that.