Angular.module ("MyApp", ["ngmessages"]);
<form name="Formmyname"ng-submit="$ctrl. ChangePassword (formmyname)"Ng-cloak novalidate> <--Enter new password--<md-input-container md-no-float> <input name=thenew Password"Type="Password"Ng-model="$ctrl. Data.newpassword"Placeholder="Please enter your password"
ng-pattern='/^ (? =.*\d) (? =.*[a-z]) (? =.*[a-z]) (? =.*[[email protected]#$%^&* (),.]) [\[email protected]#$%^&* (),.] {6,}$/'Minlength="6"Maxlength=" -"Required/> <divclass="Errors"ng-messages=" formmyname. NewPassword. $error ">
<--formmyname corresponds to the form form name,newpassword the input box Name,ng-message Verify that the name is newpassword in the Input box under Form form Ng-pattern , minlength, maxlength, required these validations are passed,
When the validation fails, $error executes Ng-message-exp and displays the following prompt, whereas $error is true when the validation passes. -<div ng-message-exp=['Required','minlength','maxlength','pattern']>you need to enter a 6-20-digit password and must include numbers, uppercase letters, lowercase, and non-numeric characters. </div>
</div
</md-input-container>
<--Enter the confirmation password--
<md-input-container md-no-float>
<input name= "ConfirmPassword" type= "password" ng-modal= "$ctrl. Data.confirmpassword" placeholder= "Please enter the confirmation password"/>
<div ng-if= "Formmyname.$submitted&& $ctrl. Data.newpassword! = $ctrl. Data.confirmpassword ">
Confirm that the password must match the new password
</div>
<--in this place to confirm the password only need to verify that the input password and the new password is consistent, you do not need to verify the minimum, maximum length and whether it is required, because if the two times the password is consistent above those verification is sure to pass, if two times the password inconsistent above those authentication is meaningless,
Then we can see that this is the ng-if of the judgment, but Ng-if is not a form validation, so we need to use JS to verify later. We look at the conditions inside the ng-if, formmyname corresponds to the form name, and $submitted means to validate when the Submit button is clicked. -
</md-input-container>
<md-button type= "Submit" >
Submit
</md-button>
</form>
Angular.module (''). Controller ('', [ '$rootScope','$mdDialog', function ($rootScope, $mdDialog) {vardata = This. data ={Password:NULL, ConfirmPassword:NULL }; Change Password This. ChangePassword =function (changepasswordform) {
Verify that the input has not been validated by the form
Verify that the password is consistent with the new password
if(changepasswordform. $invalid | | data. Password! =data. ConfirmPassword) {return$mdDialog. Hide (data. Password); }; }]);
Form form submission Validation in ANGULARJS