Angularjs使用指令做表单校验的方法


Posted in Javascript onMarch 31, 2017

前言

通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用。在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式。

简易表单

如下为一个简易表单,有四项提示信息,依据状态呈现。校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究。其中,user-validator为自定义指令。

<form class="form-horizontal" name="form" role="form" ng-controller="ValidCtrl">
 <div class="form-group">
  <label for="user" class="col-sm-2 control-label" >用户名</label>
  <div class="col-sm-5">
   <input type="text" ng-model="user" name="user" id="user" user-validator class="form-control" required="required">
  </div>
  <label class="col-sm-5" ng-show="form.user.$pristine">请输入用户名</label>
  <label class="col-sm-5" ng-show="form.user.$error.required && form.user.$dirty">
   用户名不能为空
  </label>
  <label class="col-sm-5" ng-show="form.user.$error.defined && form.user.$dirty">
   用户名不符合规则
  </label>
  <label class="col-sm-5" ng-show="form.user.$valid && form.user.$dirty">
   用户名有效
  </label>
 </div>
</form>

校验指令

校验指令代码如下:

angular.module('shuffleApp', [])
 .directive('userValidator', ['$log', function($log) {
   return {
     restrict: 'A',
     require: 'ngModel',
     link: function($scope, $element, $attrs, $ngModelCtrl) {
       var verifyRule = [/^\d+$/, /^[a-z]+$/, /^[A-Z]+$/];
       var verify = function(input) {
         return !(verifyRule[0].test(input) || 
              verifyRule[1].test(input) || 
              verifyRule[2].test(input));
       };
       $ngModelCtrl.$parsers.push(function(input) {
         var validity = verify(input);
         $ngModelCtrl.$setValidity('defined', validity);
         return validity ? input : false;
       });
       $ngModelCtrl.$formatters.push(function(input) {
         var validity = verify(input);
         $ngModelCtrl.$setValidity('defined', validity);
         return validity ? input : false;
       })
     }
   }
  }]);

指令内容非常简单,检测是否全为数字,小写字母,大写字母,然后取反即得到校验结果。然后在$parser, $formatter内部设置校验结果即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 #Javascript
ES6中Generator与异步操作实例分析
Mar 31 #Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 #Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 #Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 #Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 #Javascript
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python中装饰器高级用法详解
2017/12/25 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
树莓派实现移动拍照
2019/06/22 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
好军嫂事迹材料
2014/01/15 职场文书
实习老师离校感言
2014/02/03 职场文书
党员承诺践诺书
2014/05/20 职场文书
课外活动总结范文
2014/07/09 职场文书
六年级小学生评语
2014/12/26 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Elasticsearch 聚合查询和排序
2022/04/19 Python
java版 联机五子棋游戏
2022/05/04 Java/Android