| Powered by随笔- 188&
评论- 807&
AngularJS表单和控件可以对用户输入的数据进行验证。
在之前的章节中你已经了解了有关AngularJS表单和控件的相关内容。
AngularJS表单和控件可以提供数据验证服务,并对不合法的数据给出提示信息。
请注意任何情况下都不能仅靠客户端的数据验证,服务端数据验证也是必须的。
&!DOCTYPE html&
&script src="/ajax/libs/angularjs/1.3.14/angular.min.js"&&/script&
&h2&Validation Example&/h2&
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&
&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&
&input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid"&
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.';
novalidate属性表示禁用浏览器默认的数据验证功能。
AngularJS指令ng-model将input标签绑定到模型中。
模型对象有两个属性:user和email。
通过使用ng-show指令来显示或隐藏&span&元素,该元素的字体被设置成红色,当user或email是$dirty和$invalid时显示。
过滤器描述
表示当前field中的内容被修改过。
表示当前field中的内容是有效的。
表示当前field中的内容是无效的。
表示当前field中的内容还没有被修改。
阅读(...) 评论()&&国之画&&布布分享&&&& &&&&
版权所有 京ICP备号-2
迷上了代码!}