angularJS的输入验证

angular作为一个单页应用框架，对表单元素有很多特殊的处理，简化了很多事情。最常用的一个特性就是对输入的验证，你可以申明验证状态，并且验证不通过时不提交表单。

例如：注册表单，我们需要验证email、年龄等，如果验证不通过就不提交表单。

我们需要这么写：

<h1>注册</ h1>
<form name='addUserForm' ng-controller="AddUserCont roller" >
<div>Email : <input type=' email ' ng-model =' user. email ' required></ div>
<div>Age: <input type=' number'
ng-model =' user. age'
ng-maxlength=' 3'
ng-minlengt h=' 1' ></ div>
<div><button>Submit </ button></ div>
</ form >

上述email输入我们是required的，其实，如果不是html5的页面，angular会做相应的处理，保证处理结果一致。

然后我们需要添加一个controller来处理表单的提交。

在controller里面，我们就可以通过一个叫做$valid的属性来访问表单的验证状态，如果所有验证通过，该属性才为true。我们可以通过该属性来限制提交按钮，如果验证还没完全通过则禁止提交按钮，这里在提交按钮里面价格ng-disabled即可实现：

<button ng-disabled=' ! addUserForm . $valid' >Submit</ button>

当然还应该有交互，模板如下：

<h1>注册</ h1>
<form name=' addUserForm ' ng-controller="AddUserController">
<div ng-show =' message' >{{message}}</ div>
<div>Email : <input type=' email ' ng-model =' user. email ' required></ div>
<div>Age: <input type=' number'
ng-model =' user. age'
ng-maxlengt h=' 3'
ng-min=' 1' ></ div>
<div><button ng-click=' addUser()'
ng-disabled=' ! addUserForm.$valid' >Submit </ button>
</ ng-form >
对于的controller:
function AddUserCont roller($scope) {
$scope. message = ' ' ;
$scope. addUser = function () {
/ / 服务器交互代码。。
$scope. message = ' Thanks, ' + $scope. user. email+ ' , 注册成功 ' ;
};
}

还是挺方便的！！