Form form submission Validation in ANGULARJS

Source: Internet
Author: User
Tags button type

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.