<p ng-cloak  class="ng-cloak">

<img class="col-sm-1 check" src="img/yes.png" ng-show="passwdValid=='yes'">

<img class="col-sm-1 check animated rubberBand" src="img/no.png"  ng-show="passwdValid=='no'">

</p> </p>

<p class="form-group">

<label class="control-label col-sm-2 col-sm-offset-2" for="passwdAgain">确认密码：</label>

<p class="col-sm-4">

<input class="form-control" type="password" name="passwdAgain" ng-model="passwdAgain" ng-change="passwdAgainCheck()">

</p>文献综述

<p ng-cloak  class="ng-cloak">

<img class="col-sm-1 check" src="img/yes.png" ng-show="passwdAgainValid=='yes'">

<img class="col-sm-1 check animated rubberBand" src="img/no.png"  ng-show="passwdAgainValid=='no'">

</p> </p>

<p class="form-group">

<p class="col-sm-12 text-center">

<input class="btn btn-primary" type="button" value="register" ng-click=mySubmit() ng-disabled="usernameValid!='yes' || passwdValid!='yes' || passwdAgainValid!='yes'">

</p></p></form></p>

页面上有三个输入框，对应的第一个输入想要注册的账号，第二个输入密码，第三个再次输入密码以确认。

在第一个输入框之中我绑定了ng-blur事件每当输入框失去焦点时触发绑定的usernameCheck函数，在后台进行异步验证用户名的合法性，这期间用户可以继续填写其他输入框内容，不受它的影响。如果后台返回的数据通过则在输入框后面显示绿色小勾，如果验证不通过则在输入框后面显示红色叉叉。ng-change事件是当用户对输入框中的内容进行了修改之后出触发，目的是在预防当一个用户第一次填写全部通过验证时，再回头修改用户名，这时如果不做ng-change事件监听可能就会让他成功提交表单，但是最后却注册失败的情况发生。为了避免这种情况我就将usernameChange函数绑定在了第一个输入框的ng-change事件上。

在第二个输入框之中我同样绑定了ng-blur和ng-change事件，目的和第一个输入框差不多，也是为了防止用户误操作。

第三个输入框只绑定了ng-change事件，因为它不需要向后台发送请求，只需要直接比较第二个输入框之中的内容即可。

最后有一个注册提交按钮，初始是灰色不可点击的，只有当所有的输入框全部都验证成功了他才会恢复可点击状态，点击以后正式向后台提交表单内容，由后台完成最终的注册验证。

如果注册成功会跳转到登录界面，并且显示绿色小提示框提示注册成功。如果注册失败就会弹出红色警告提示窗提示注册失败。

图 4。14 注册验证失败

JS

function registerCtrl($scope,$http,$state,notify,urls){

$scope。usernameValid=null; //判断用户名合法

$scope。passwdValid=null; //判断密码合法

$scope。passwdAgainValid=null; //判断密码确认

//检查用户名是否已存在 每次blur时触发

$scope。usernameCheck=function(){

var username=$scope。username;