注册过程的确好多需要验证的,但是注册成功之后的登录就简单多了,
只要用户 输入 用户名和密码,
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>密 码</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>
</form>