您的位置：首页 > Web前端 > AngularJS

AngularJS Tutorial（14）from w3school

2015-08-04 09:28 615 查看

AngularJS forms and controls can validate input data.

Input Validation

In the previous chapter, you learned about AngularJS forms and controls.

AngularJS forms and controls can provide validation services, and notify users of invalid input.

	Client-side validation cannot alone secure user input. Server side validation is also necessary.

Application Code

<!DOCTYPE
html>

<html>

<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<h2>Validation Example</h2>

<form
ng-app="myApp" 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>

var app = angular.module('myApp', []);

app.controller('validateCtrl', function($scope) {

$scope.user = 'John Doe';

$scope.email = 'john.doe@gmail.com';

});

</script>

</body>

</html>

Try it Yourself »

	The HTML form attribute novalidate is used to disable default browser validation.

Example Explained

The AngularJS directive ng-model binds the input elements to the model.

The model object has two properties: user and email.

Because of ng-show, the spans with color:red are displayed only when user or email is
$dirty and $invalid.

Property	Description
$dirty	The user has interacted with the field.
$valid	The field content is valid.
$invalid	The field content is invalid.
$pristine	User has not interacted with the field yet.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航