angularjs验证 angularjs验证|AngularJS教程

本文概述

AngularJS表单验证示例

AngularJS提供客户端表单验证。它检查表单和输入字段（输入，文本区域，选择）的状态，并让你通知用户当前状态。
【angularjs验证】它还保留有关是否已触摸或修改输入字段的信息。
通常使用以下指令来跟踪AngularJS形式的错误：

$ dirty-指出值已更改。
$ invalid-指出输入的值无效。
$ error-指出确切的错误。

AngularJS表单验证示例

< !DOCTYPE html> < html> < head> < title>Angular JS Forms< /title> < script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">< /script> < style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; }table tr:nth-child(odd) { background-color: lightpink; }table tr:nth-child(even) { background-color: lightyellow; } < /style>< /head> < body>< h2>AngularJS Sample Application< /h2> < div ng-app = "mainApp" ng-controller = "studentController">< form name = "studentForm" novalidate> < table border = "0"> < tr> < td>Enter first name:< /td> < td>< input name = "firstname" type = "text" ng-model = "firstName" required> < span style = "color:red" ng-show = "studentForm.firstname.$dirty & & studentForm.firstname.$invalid"> < span ng-show = "studentForm.firstname.$error.required">First Name is required.< /span> < /span> < /td> < /tr>< tr> < td>Enter last name: < /td> < td>< input name = "lastname"type = "text" ng-model = "lastName" required> < span style = "color:red" ng-show = "studentForm.lastname.$dirty & & studentForm.lastname.$invalid"> < span ng-show = "studentForm.lastname.$error.required">Last Name is required.< /span> < /span> < /td> < /tr>< tr> < td>Email: < /td>< td>< input name = "email" type = "email" ng-model = "email" length = "100" required> < span style = "color:red" ng-show = "studentForm.email.$dirty & & studentForm.email.$invalid"> < span ng-show = "studentForm.email.$error.required">Email is required.< /span> < span ng-show = "studentForm.email.$error.email">Invalid email address.< /span> < /span> < /td> < /tr> < tr> < td> < button ng-click = "reset()">Reset< /button> < /td> < td> < button ng-disabled = "studentForm.firstname.$dirty & & studentForm.firstname.$invalid || studentForm.lastname.$dirty & & studentForm.lastname.$invalid || studentForm.email.$dirty & & studentForm.email.$invalid" ng-click="submit()">Submit< /button> < /td> < /tr> < /table> < /form> < /div> < script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.reset = function(){ $scope.firstName = "Sonoo"; $scope.lastName = "Jaiswal"; $scope.email = "sonoojaiswal@srcmini.com"; } $scope.reset(); }); < /script> < /body> < /html>