怎么在Angularjs中使用指令实现表单校验-创新互联

这篇文章将为大家详细讲解有关怎么在Angularjs中使用指令实现表单校验,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,微信小程序,10年建站对电动窗帘等多个方面,拥有丰富的网站设计经验。

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


 
  用户名
  
   
  
  请输入用户名       用户名不能为空          用户名不符合规则          用户名有效     

校验指令

校验指令代码如下:

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内部设置校验结果即可。

关于怎么在Angularjs中使用指令实现表单校验就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:怎么在Angularjs中使用指令实现表单校验-创新互联
文章起源:http://scyanting.com/article/ejhcg.html

其他资讯