javascript - How to use Regular Expressions with a Form using Angular (no jQuery) -

i have simple input field. want make sure rules met before submission

the password must:  0. have @ least 8 characters 1. have no more 8 characters 2. have both upper , lower case characters 3. have @ least 1 letters 4. have @ least 1 digits 5. have 1 of @ # $ 6. contain characters available on standard english (us) keyboard. list of valid characters 7. not old password 

my html form

<form name="login" action="index_submit" method="get" accept-charset="utf-8">     <ul>         <li><label for="username">email</label>         <input type="email" name="username" placeholder="username@example.com" required></li>         <li><label for="password">current password</label>         <input type="password" name="current_password" placeholder="current password" required></li>         <li><label for="password">new password</label>         <input type="password" name="new_password" placeholder="new password" required></li>         <li>         <input type="submit" value="login"></li>     </ul> </form> 

i want apply rules "new_password"

add checkmark (green) if rules successful or red x if don't meet criteria.

i new angular not new regex. have expression

"^(?=.{8}$)(?=.*[a-z])(?=.*[0-9])(?=.*[,@#$])" 

it nice know of rules has been violated

you can use ngpattern on input. more information here.