使用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来验证用户输入,从而过滤掉非数字输入。这完全取决于你的爱好,没有硬性规定,只是选择多一些罢了。
相关推荐
NULL 博文链接:https://bijian1013.iteye.com/blog/2392684
主要介绍了AngularJs表单校验功能实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
NULL 博文链接:https://bijian1013.iteye.com/blog/2232029
ng-remote-validate, Ajax &服务器端对Angularjs的验证 Angularjs#的#Ajax 验证ngRemoveValidate使你可以轻松地从服务器验证表单域代理数据。 例如注册表单可能需要在提交表单前检查输入的电子邮件是否已经注册。...
暂时有http的校验 和 纯数字的校验,代码共享
使用angularJS完成表单验证功能
angularjs自定义指令directive,用做http地址校验和数字校验,仅供学习参考使用
串口/485通信测试工具,带各种校验方式。
本文给大家介绍使用Bootstrap新制作的一个登录框,带验证码,带校验,非常不错,具有参考借鉴价值,感兴趣的朋友可以参考下
主要介绍了AngularJS表单校验用法,结合实例形式分析了AngularJS各种常见的表单校验功能及使用技巧,需要的朋友可以参考下
在客户端使用AngularJS做身份验证的话,推荐使用service来做,下面脚本之家小编给大家介绍AngularJS身份验证的方法,感兴趣的朋友一起学习吧
不错的界面JQuery界面校验例子,可以直接用在web项目中进行界面输入的校验和提示。
串口调试助手是一款win7串口调试工具,它能用来修改串口波特率、校验位、数据位和串口停止位,还能设置接受区和发送区,并能增加串口的自动识别功能,让串口号的限制不再困扰。而且它不止能应用在win7系统上,win ...
发送端通过液晶触摸屏输入字符,然后编写协议发送,采用4.3寸液晶 接收端将接收到的数据解码,然后将有效字符显示在液晶上,采用2.8寸液晶 接收无误码,使用于各种数字无线收发的应用
生成带校验码的卡号、19位的Long ID、不大于22位的短UUID、短卡号、激活码、数字加密、付款码。分布式、基于内存、安全可靠、性能高。
本人搞单片机串口通信时首选的软件,主要是它自带CRC,校验和,比其它方便多了。
本文是对AngularJS表单验证,手动验证或自动验证的讲解,对学习JavaScript编程技术有所帮助,感兴趣的小伙伴们可以参考一下