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>
<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.