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 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
深入理解javascript中的this
Feb 08 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python更改已存在excel文件的方法
2018/05/03 Python
python logging 日志的级别调整方式
2020/02/21 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
初一地理教学反思
2014/01/16 职场文书
火车来了教学反思
2014/02/11 职场文书
金融保险专业求职信
2014/09/03 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
写给老师的感谢信
2015/01/20 职场文书
庆六一开幕词
2015/01/29 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
早恋主题班会
2015/08/14 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书