AngularJS input verification
May 08, 2021
AngularJS
Table of contents
AngularJS
input verification
AngularJS forms and controls provide validation to determine the input with the user to determine whether the input is legal and to warn if it is not.
AngularJS forms and controls validate the data entered.
Enter validation
In the previous sections, you learned about AngularJS forms and controls.
AngularJS forms and controls provide validation and warn users of illegal data entered.
|
Client authentication does not guarantee the security of user input data, so data validation on the service side is also a must.
|
The app code
<!
DOCTYPE html>
<html>
<body>
<h2>Validation Example</h2>
<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js" rel="external nofollow" ></script>
<script>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
}
</script>
</body>
</html>
Try it out . . .
|
The HTML form
property novalidate is
used to disable the browser's default authentication.
|
Instance resolution
The AngularJS
ng-model instruction
is used to bind input elements into the model.
Model objects have two properties:
user
and
email.
We used
the ng-show
instruction, color:red is displayed
when the message $dirty
or $invalid
the
message.
Read about it
HTML form validation