angularjs 研究1 : 表单的验证
来源:互联网 发布:淘宝网天猫购裱画材料 编辑:程序博客网 时间:2024/05/24 05:55
最近在项目中用到angularjs的表单验证,通过网上的一些文章和自己的感觉,可以大致中css样式(和ng-命令对应的class)和 js(格式为: 表单名.字段名.验证的点。如 loginForm.email.$invalid ) 两个方向上进行研究
1.css样式:每个ng-命令都会在html代码中对应一个或多个className。
如下图所示
<form name="loginForm" ng-submit="login(loginJson)" novalidate> <div class="form-group ptrt"> <label for="email">Email address</label> <input type="email" class="form-control" ng-model="loginJson.email" id="email" name="email" placeholder="Email" required ng-minlength="5" ng-maxlength="20" /> <span ng-show="loginForm.email.$dirty && loginForm.email.$invalid"> <span ng-show="loginForm.email.$error.minlength" class="form-validation-error">email长度不能小于5</span> <span ng-show="loginForm.email.$error.maxlength" class="form-validation-error">email长度不能大于20</span> <span ng-show="loginForm.email.$error.required" class="form-validation-error">email不能为空</span> </span> </div> <button type="submit" class="btn btn-default" ng-disabled="loginForm.email.$invalid">Submit</button>
而且这些className 在用户的交互中,也会发生变化。
下面会根据一些常见的验证过程,来说明用户交互和className的变化
1. 用户直接点击提交。
ng-disabled="loginForm.email.$invalid || loginForm.password.$invalid"
由于添加了ng-disabled命令,提交的按钮为不可用状态。
- 在输入框内输入内容。
只要在输入框内输入第一个字符开始,angularjs的验证就开始工作。
className 中 的 ng-pristine 变成 ng-dirty。
但是这些我们都可以不用管。加好自己的验证代码就可以了
<span ng-show="loginForm.email.$dirty && loginForm.email.$invalid"> <span ng-show="loginForm.email.$error.minlength" class="form-validation-error">email长度不能小于5</span> <span ng-show="loginForm.email.$error.maxlength" class="form-validation-error">email长度不能大于20</span> <span ng-show="loginForm.email.$error.required" class="form-validation-error">email不能为空</span> <span ng-show="!loginForm.email.$error.minlength && !loginForm.email.$error.maxlength && loginForm.email.$error.email" class="form-validation-error">email格式不正确</span></span>
上面的代码意思是输入框的值发生变化但是还有还没有通过验证的时候,就显示下面的4种错误提示中的一种。需要注意的是第四种错误提示,由于它会第一和第二的错误提示可能会同时出现,所以要对它的显示要做一个格外的限制。
这里有一个补充说明的地方就是
<input type="checkbox" id="isAutoLogin" />
针对这种checkbox,如果使用像icheck 这种改变checkbox默认样式的插件,会对其ng-model 的取值造成印象。
所以我使用如下方法
使用隐藏值方法,来代替解决。
这里有另一种验证方式
http://www.ngnice.com/posts/69f774dc4d3190
1 0
- angularjs 研究1 : 表单的验证
- AngularJS 的表单验证
- AngularJS 的表单验证
- AngularJs的表单验证
- angularJs的表单验证
- AngularJS 的表单验证(转)
- AngularJs表单验证的例子
- AngularJs表单验证实例1
- AngularJS中使用的表单验证
- angularjs常用的表单验证指令
- angularJS常用的表单验证指令
- 基于angularJS的表单验证指令
- AngularJS 表单基本的验证功能
- angularJs -- 简单表单验证
- 表单验证<AngularJs>
- AngularJS表单验证
- AngularJs表单验证
- AngularJS 表单验证
- PAT 1018A+B in Hogwarts (20)
- 爬虫经典练手项目——HFUT GPA计算器
- UML学习总结
- Android Studio 主题、字体大小的设置
- eclipse中写js会自动补全大括号,但是回车的时候会加一个大括号
- angularjs 研究1 : 表单的验证
- Git-java-linux学习
- word2vec
- java使用swfupload,在火狐浏览器上总是报302
- web前端开发小工具集合
- Genymotion的使用以及错误解决
- hdoj 1159 && nyoj 36【DP - LCS】
- c语言==复合数据类型(14)
- Could not connect to SMTP host,PKIX path building failed,unable to find valid certification path...