http://www.jb51.net/article/89445.htm
AngularJS Input Validation
AngularJS forms and controls can validate input data.
Input validation
In the previous chapters, you have learned about AngularJS forms and controls.
AngularJS forms and controls can provide validation and warn users of illegal data entered.
Note: Client-side validation cannot ensure the security of user input data, so server-side data validation is also necessary.
Application code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular. min.js"></script>
</head>
<body>
<h2>validate instance</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p >Username:<br>
<input type="
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<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">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail .com';
});
</script>
</body>
</html>
Note: The HTML form attribute novalidate is used to disable the browser's default validation.
Example parsing
AngularJS ng-model directive is used to bind input elements to models.
The model object has two properties: user and email.
We used the ng-show directive, color:red is only displayed if the email is $dirty or $invalid.
Property description
$dirty form has filled records
$valid field content is valid
$invalid field content is illegal
$pristine form has no filled records
angular input validation
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326759076&siteId=291194637
Ranking