angularjs带校验登录窗口

阅读更多

使用angular， bootstrap，ui-bootstrap的登录窗口：

 

   

       

           

                 ng-class="{'has-success':xForm.username.$valid,'has-error':xForm.username.$invalid&&xForm.username.$dirty}">

                用户名

               

                   

                           id="username" required>

                   

                          ng-class="{'glyphicon-ok':xForm.username.$valid,'glyphicon-remove':xForm.username.$invalid&&xForm.username.$dirty}">

               

               

                    必填

                    email 地址不对

               

           

           

                 ng-class="{'has-success':xForm.password.$valid,'has-error':xForm.password.$invalid&&xForm.username.$dirty}">

                密 码

               

                   

                           id="password" required="" ng-pattern="/^[\S]{6,}$/" >

                   

                          ng-class="{'glyphicon-ok':xForm.password.$valid,'glyphicon-remove':xForm.password.$invalid&&xForm.password.$dirty}">

               

               

                    密码至少六位

               

           

           

               

                   

                       

                            记住我

                       

                   

               

           

           

               

                    登录

               

           

       

   

 

校验参数备忘：

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

• 
• 大小: 10.6 KB

• 
• 大小: 9.9 KB

• 查看图片附件