What does the input pattern value below mean? - html

I've found this input pattern value from this website.
^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$
But, I don't know what this means as I don't really understand this input pattern stuff. Thank you!! 😊

It is a Regular Expression used for validating an email address. the pattern attribute is used to accept only the inputs that follow the mentioned pattern.
Simply, to understand, the above Regular Expression accepts inputs of the form xxx#yyy.yyy
Here,
xxx should be anything between a-z or A-Z or 0-9 or the mentioned symbols. You can repeat the xxx any no. of times, like aabzz##.
after this, an # symbol must be included.
Later, yyy could be anything, 1 or more times, among a-z or A-Z or 0-9, followed by a dot (.). After this dot, you should have atleast 1 character between a-z or A-Z or 0-9
Note: in yyy Symbols are not allowed according to the regular expression.
If all these requirements meet, then your input is valid, otherwise, it is invalid.

Related

HTML Password Validation - Need a special character mandatory but not a digit (number)

Need to set a validation for password where the use case is "Password must require 1 Upper Case, 1 Special Character and at least 6 characters"
Currently using Pattern:
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
However, If I enter password as John#doe - it still asks to enter a digit (number). I presume it is because of (?=.*\d), but if I remove this, then password is accepted without any special character.
How can I use a pattern where it asks for Special Character but not a digit (number)?
Just an update - following pattern worked
^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[#?!#$%^&*-]).{6,}$
Adding Description/Breakdown:
Earlier (?=.*\d) was consuming both numbers & special characters - not sure why. But separating them as below helps to resolve this.
At least one upper case English letter, (?=.*?[A-Z])
At least one lower case English letter, (?=.*?[a-z])
At least one digit, (?=.*?[0-9])
At least one special character, (?=.*?[#?!#$%^&*-])
Minimum six in length .{6,} (with the anchors)
source: https://stackoverflow.com/a/19605207/10926448

Regex grouping: must start with /, optional group of characters alpha-numeric with forward slashes and total 1-255 characters

I have an HTML5 input element with a pattern attribute. I'm having some trouble with an optional group.
The (relative) URL must start with a forward slash (I have this working).
The total (relative) URL may contain a total of up to 255 characters.
All characters from 2-255 must be (lowercase) alpha-numeric or a forward slash.
Separately the forward slash regex works and the 2-255 part works for alpha-numeric and forward slashes. However I'm having trouble allowing both groups with the second group being optional.
What I have confirmed to work:
pattern="^\/"
pattern="[a-z0-9\/]"
However I can't determine how to allow the second group as an option (I've tried adding the ? after the ending square bracket in example without luck).
I also am not sure how to combine the length ({255,}) bit to the total pattern expression.
How do I combine all three aspects of the regular expression?
Note: tags seem to be broken at the moment of posting this.
You can use
pattern="/[a-z0-9/]{0,254}"
You do not need ^ nor $ in the pattern regex, by the way, it must match the whole string anyway, it will be parsed as ^(?:/[a-z0-9/]{0,254})$ pattern. That is, it will match a string that starts with / and then contains 0 to 254 lowercase ASCII letters, digits or slashes till the string end.
Note that / should only be escaped in regex literals where / is used as a delimiter char. pattern regexps are defined with literal strings.

Combining two regexes

I'm trying to combine two regexes. One will ensure that input contains 14 digits: ^\\d{14}$ and I need another regex to check if all the input is not of the same digit.
Please suggest how I proceed with this. I want my regex to check for that the input is 14 digits and those digits are not all same numbers [0-9].
Is there a way I add the test for finding not all digits are the same with my regex that checks for if the input is exactly 14 digits? I would need one regex expression which combines them both. Thank you!
You can use negative lookahead with a back reference to the first digit:
(?!(\d)\1{13})\d{14}$
NB: This is pure regex syntax. I did not escape backslashes for use in a programming language.
There is no regex operation for "match here for all-of-these except a back-reference". You have a two-step test here, not a single one.

Regex / Pattern HTML email

Is there a way to associate two regex ?
I have this one which prevents user to use this email (test#test.com)
pattern="^((?!test#test.com).)*$"
I also have one which validates email syntax
pattern="[a-z0-9._%+-]{3,}#[a-z]{3,}([.]{1}[a-z]{2,}|[.]{1}[a-z]{2,}[.]{1}[a-z]{2,})"
How to merge those two regex in order to prevent user to user test#test.com and to validate the email syntax ?
I tried to use an OR operator (single pipe) but I am missing something, it doesn't work ...
Thanks !
It seems you may use
pattern="(?!test#test\.com$)[a-z0-9._%+-]{3,}#[a-z]{3,}\.[a-z]{2,}(?:\.[a-z]{2,})?"
Note that the HTML5 patterns are automatically anchored as they are wrapped with ^(?: and )$ at the start/end, so no need adding ^ and $ at the start/end of the pattern.
The (?!test#test\.com$) negative lookahead will fail the match if the input string is equal to the test#test.com string (unlike your first regex that only fails the input that contains the email).
The rest is your second pattern, I only removed {1} that are implicit and contracted an alternation group to a \.[a-z]{2,}(?:\.[a-z]{2,})? where (?:\.[a-z]{2,})? is an optional non-capturing group matching 1 or 0 sequences of . and 2 or more lowercase ASCII letters.
Add A-Z to the character classes to also support uppercase ASCII letters.

Regex that allows numbers with commas and two decimals

I'm trying to make a number input field using the pattern attribute since the regular type number didn't support the validations I needed.
Essentially, I want to allow any numbers that make sense, including $, + or - at the start and a % at the end. Also, users should be able to separate their numbers with commas to avoid mistakes on long numbers, but this is not necessary and they should still be able to submit a long number without any type of separation. The field should also allow for decimals.
<input required pattern="[+-]?\$?\d+(,\d{3})*(\.\d+)?%?" type="text" />
I need to allow for the following examples:
Pass:
2000
-20%
2,000
$2,000.00
999,999,999,999,999,999,999.99
Fail:
123e9
Anything that has letters on it
This is the regex that I have so far, but it doesn't seem to work, even for the most basic numbers. I've been using scriptular to test my regex, but that doesn't seem to reflect the results of the actual HTML validation.
Regex: [+-]?\$?\d+(,\d{3})*(\.\d+)?%?
EDIT: For any Ruby on Rails devs, I realized one of my mistakes is that you must escape any backslashes in your regex when you are generating your text_field. So for example, the regex in the answer should look like (?:\\+|\\-|\\$)?\\d{1,}(?:\\,?\\d{3})*(?:\\.\\d+)?%?
Try with following regex.
Regex: (?:\+|\-|\$)?\d{1,}(?:\,?\d{3})*(?:\.\d+)?%?
Explanation:
(?:\+|\-|\$)? matches either + - or $ in-front of a number which is optional as ? quantifier is used.
\d{1,} matches integer part even if it doesn't have ,.
(?:\,?\d{3})* matches multiple occurrences of comma separated digits if present.
(?:\.\d+)? matches optional decimal part.
%? matches optional % character in the end.
?: stands for non-capturing groups. It will match but won't store it for back-referencing.
Regex101 Demo