AngularJS学习之登录表单清爽验证（边学边更新）

本文主要是介绍AngularJS学习之登录表单清爽验证（边学边更新），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注册过程的确好多需要验证的，但是注册成功之后的登录就简单多了，

只要用户输入用户名和密码，

ajax向后台提交登录请求，

根据返回的结果确定用户名或者密码是否正确即可登录。

所以这个登录表单的验证是非常简单清晰的

<div class="wrap" ng-controller="LoginCtrl"><fieldset><legend>后台登录系统</legend><form><p><label>用户名</label><input name="user" ng-model="username"  class="user" autofocus="autofocus"  ng-keyup="myKeyup($event)"/>/*通过添加ng-keyup时间当用户输入好用户名和密码直接按回车键就可以登录，无须再点击登录按钮，方便了用户*/</p>/*autofocus属性让光标自动聚焦在用户名输入框，用户可以直接输入，无须再点一下鼠标才能定位*/<p><label>密&#12288;码</label><input name="password" ng-model="password" class="password" type="password"  ng-keyup="myKeyup($event)" /><span class="warning" ng-model="warning" ng-show="warning">{{warning}}</span>/*通过ng-model与后台js代码中设置的变量warning建立关系，如果warning有值，
就说明ng-show的表达式为true，相应的错误信息就会显示出来*/</p>**<p><input type="button" ng-click="login()" class="button" value="登录" /></p></form></fieldset>
</div>

附加：HTML

<form role="form" name="myForm" ng-model="myForm"  class="form-horizontal">/*必须设置name属性，用于ng-show调用*/
<div class="form-group">
 　　<label class="col-sm-2 control-label">标题名称</label> 
　　　　<div class="col-sm-10"> 
　　　　　　<input type="text" name="name" class="form-control" placeholder="请输入标题名称" required ng-model="article.name"/>/*必须设置name属性，用于ng-show调用*/
　　　　　　 <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="myForm.name.$valid"></span>/*当name输入有效时才显示*/ 
　　　　</div> 
　</div>

<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-success" ng-disabled="myForm.$invalid" >提交</button>/*当myForm所有设置了ng-model的属性都输入了正确的值，提交按钮才会可用，否则处于禁用状态*/
  </div>
</div>