angularjs带校验登录窗口

使用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来验证用户输入，从而过滤掉非数字输入。这完全取决于你的爱好，没有硬性规定，只是选择多一些罢了。