Formulir Validasi dengan CSS
// add requited attribute and pattern i html for mail : pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
for only text pattern="^[a-zA-Z]+$" ,
required //
input[type="email"]:valid,input[name="name"]:valid {
border: solid 3px green;
}
input[type="email"]:invalid:focus,input[name="name"]:invalid:focus {
border: solid 3px red;
}
or
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
// regex for password
Minimum eight characters, at least one letter and one number:
"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
Minimum eight characters, at least one letter, one number and one special character:
"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"
Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:
"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"
9
regex passwordJavascript By DieOver on May 11 2020 DonateThankComment
^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})
Source:www.thepolyglotdeveloper.com
5
///// regex for user name
# works in most newer browsers
^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$
└─────┬────┘└───┬──┘└─────┬─────┘└─────┬─────┘ └───┬───┘
│ │ │ │ no _ or . at the end
│ │ │ │
│ │ │ allowed characters
│ │ │
│ │ no __ or _. or ._ or .. inside
│ │
│ no _ or . at the beginning
│
username is 8-20 characters long
# works in all browsers, but does the same as the above RegEx
^(?=[a-zA-Z0-9._]{8,20}$)(?!.*[_.]{2})[^_.].*[^_.]$
Marwen Labidi