</p>
<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; HTML5禾粒农场智能管理系统门户网站设计(11):http://www.youerw.com/jisuanji/lunwen_96771.html