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网页关闭时提醒效果脚本
Oct 22 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
layui实现动态和静态分页
Apr 28 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
就业自我评价
2014/02/04 职场文书
公证委托书模板
2014/04/03 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js