如何在使用Angular的表单中使用正则表达式（无jQuery）

Question

I have a simple input field. I want to make sure certain rules are met before submission

The password must: 
0. have at least 8 characters
1. have no more than 8 characters
2. have both upper and lower case characters
3. have at least 1 letters
4. have at least 1 digits
5. have one of @ # $
6. contain only characters available on a standard English (US) keyboard. List of valid characters
7. not be an 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 only want to apply the rules to the "new_password"

Add a checkmark (green) if the rules are successful or red X if they don't meet the criteria.

I am new to Angular but not new to RegEx. I have the Expression

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

It would be nice to know which of the rules it has been violated

Answer 1

You can use ngPattern on the input. More information here .

Answer 2

You can use ng-pattern for Regex. This will not allow you to know which of the rules encoded in your pattern were violated. For that, you may want to use a combination of directives like, ng-minlength , ng-maxlength .

Take a look at: https://docs.angularjs.org/guide/forms

Answer 3

You can also use custom $validators in order to apply specific validation logic to your fields (but like the other posters mentioned, ng-pattern is great for that purpose).

It's working in conjunction with models, when you model changes (= the field value changes), it's checking it against the custom registered $validators (through a directive for instance) and updating the model with the results of the validation.

Here is a working plunkr with your regexp: http://embed.plnkr.co/CdITVLnZOZgAzrqAV4iA/preview (you can use the code view to check out how it's done)

You can also read the AngularJs documentation about forms, you can do a lot of interesting stuff using directives and models within your forms.

https://docs.angularjs.org/guide/forms