AngularJS表单验证功能分析


Posted in Javascript onMay 26, 2017

本文实例讲述了AngularJS表单验证功能。分享给大家供大家参考,具体如下:

在AngularJS的管辖下,每个表单form都会创建一个ngFormController的一个实例。在表单里面的每个input都会创建一个在这个实例下的ngModelController实例,用以控制每个input的行为。

首先先从简单的验证开始。

AngularJs的ngModelController提供了几种属性:$pristine;$dirty;$valid;$invalid;$error

pristine:表单并没有改变。
dirty:表单改变了。
valid:全部控件符合验证规则。
invalid:至少有一个控件不符合验证规则。
error:有错,但是不知道什么错。

创建一个表单如下:

<form name="userForm" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span>
</form>

首先每个form都要有自己的name。通过这个name来对自己下面的input进行控制。而后,每个input标签都要有自己的name。name是很关键的一步,被用于识别每个不同的input,从而识别不同的ngModelController。使用pattern来设置自己的正则表达式规则。使用$error来检测这个正则表达式是否正确。并把它赋予给ng-show指令。如果有错,整个$error 就会返回true,显示设置好的提示信息,一直到正则表达式通过,$error返回false,ng-show 对其进行隐藏。

以上的简单例子是没有自己去重新设置控制器的行为,一切都是AngularJs默认的。可以看到ng-show里面的判断代码其实是可以交给后面的JS完成的,这样可以看到ngModelController的具体过程。

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span style="color:red" ng-show="showError(userForm.name,'pattern')">用户名必须XX</span>
  <span style="color:green" ng-show="showSuccess(userForm.name)">成功!</span>
  <!--对按钮进行动态锁定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>
/*JS*/
app.controller("main",function($scope){
  $scope.showError=function(ngModelController,abc){
    return ngModelController.$error[abc];
  };
  $scope.showSuccess=function(ngModelController){
    return ngModelController.$valid; /*至少有1错误,返回false,无错误,返回true*/
  };
   $scope.submit=function(ngFormController){
    return ngFormController.$invalid; /*valid的取反*/
  };
});

这里直接在控制器里面的ngModelController里进行判断。里面有一个坑,就是判断$valid 等等这类属性是没有带参数的。而判断$error 则需要表明“判断什么”,我传了自己的一个正则表达式给他。

AngularJs还可以对表单的提交按钮进行“锁定”。但要注意的是,此时BUTTON对应的Controller不再是针对某一个input的ngModelController,而是针对整个form的ngFormController了,因此,里面的$invalid 是判断所有的input有没有问题,全部都没问题的时候才会解锁。

思考:正则表达式或者minlength类似这种限制,能否写在JS文件里面。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 #Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 #Javascript
BootStrap中的Fontawesome 图标
May 25 #Javascript
Vue.js 中的 $watch使用方法
May 25 #Javascript
详解Javascript获取缓存和清除缓存API
May 25 #Javascript
Angularjs 实现动态添加控件功能
May 25 #Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
php计算年龄精准到年月日
2015/11/17 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
公司请假条范文
2014/04/11 职场文书
感恩的演讲稿
2014/05/06 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
会计学习心得体会
2014/09/09 职场文书
奔腾年代观后感
2015/06/09 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python