使用angular， bootstrap，ui-bootstrap的登录窗口：
<div>
<div>
<form class="form-horizontal" role="form" method="post" ng-submit="hello()" name="xForm">
<div class="form-group has-feedback"
ng-class="{'has-success':xForm.username.$valid,'has-error':xForm.username.$invalid&&xForm.username.$dirty}">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-7">
<input ng-model="user.username" name="username" type="email" class="form-control"
id="username" required>
<span class="glyphicon form-control-feedback glyphi"
ng-class="{'glyphicon-ok':xForm.username.$valid,'glyphicon-remove':xForm.username.$invalid&&xForm.username.$dirty}"></span>
</div>
<div class="col-sm-3" ng-show="xForm.username.$invalid&&xForm.username.$dirty">
<span style="color: #ff4a0d" ng-show="xForm.username.$error.required">必填</span>
<span style="color: #ff4a0d" ng-show="xForm.username.$error.email">email 地址不对</span>
</div>
</div>
<div class="form-group has-feedback"
ng-class="{'has-success':xForm.password.$valid,'has-error':xForm.password.$invalid&&xForm.username.$dirty}">
<label for="password" class="col-sm-2 control-label">密 码</label>
<div class="col-sm-7">
<input ng-model="user.password" name="password" type="password" class="form-control"
id="password" required="" ng-pattern="/^[\S]{6,}$/" >
<span class="glyphicon form-control-feedback glyphi"
ng-class="{'glyphicon-ok':xForm.password.$valid,'glyphicon-remove':xForm.password.$invalid&&xForm.password.$dirty}"></span>
</div>
<div class="col-sm-3 has-error" ng-show="xForm.password.$invalid&&xForm.password.$dirty">
<span style="color: #ff4a0d">密码至少六位</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
</div>
校验参数备忘：
xform.username.$valid 标记表单元素有效；
xform.username.$invalid 标记表单元素无效；
xform.username.$pristine 表示表单元素是纯净的，用户未操作过；
xform.username.$dirty 表示表单元素是已被用户操作过；
注意事项
①novalidate
标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
②type类型
HTML5的type属性可以包含text、email、number等，但是angular又内部重写了这些属性，所以放心大胆的去用吧，angular完全可以满足你所有的验证。
③type="number"还是ng-pattern="/^[0-9]{6}$/"
你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。