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 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
AngularJS中的模块详解
Jan 29 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
简述JS控制台的使用
Jul 15 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Vue程序调试的方法
2019/06/17 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
说一说Python logging
2016/04/15 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python日志模块logbook使用方法
2019/09/19 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
简历里的自我评价
2014/01/31 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
幸福终点站观后感
2015/06/04 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书