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)" />
        {{warning}}/*通过ng-model与后台js代码中设置的变量warning建立关系,如果warning有值,
就说明ng-show的表达式为true,相应的错误信息就会显示出来*/
      </p>**
      <p>
        <input type="button" ng-click="login()" class="button" value="登录" />
      </p>
    </form>
  </fieldset>
</div>

 

 

AngularJS, 

 

 

 

 

 

 

 

 

 

 

附加: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调用*/
       /*当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>

</form>

 

相关文章