Introduction of ANGULARJS based form verification instructions _angularjs

Do development so long has been the form to verify this seemingly simple and not simple things get very upset, so write a form verification framework, no longer worry about this annoying validation.

Here, using Angularjs 's instructions to process the code and its simplicity and clarity

Here is the instruction JS code

App.directive (' Ccform ', [' $parse ', function ($parse) {return {restrict: ' A ', link:function (scope,element,attrs)
      {var first=true;
      var errors=0;
      var checkinterval;
          function ShowError (input,errorindex) {if (a) {errors++;
          $parse (element.attr (' Cc-form ')). assign (Scope,false);
          Refreshscope (scope);
        Return
        } input.addclass (' Haserror ');
        Input.closest ('. Form-group '). addclass (' Haserror ');
        Input.next ('. Help-block '). Find ('. Cc-show '). Removeclass (' cc-show ');
        Input.next ('. Help-block '). Find (' [cc-error-' +errorindex+ '] '). addclass (' cc-show ');
        Input.closest ('. Form-group '). Next ('. Help-block '). Find ('. Cc-show '). Removeclass (' cc-show ');
      Input.closest ('. Form-group '). Next ('. Help-block '). Find (' [cc-error-' +errorindex+ ']). addclass (' cc-show ');
        function Hiderror (input,errorindex) {errors--; if (errors==0) {$parse (element.attr (' Cc-form ')). assign (Scope,true);
        Refreshscope (scope);
        } input.removeclass (' Haserror ');
        Input.closest ('. Form-group '). Removeclass (' Haserror ');
        Input.next ('. Help-block '). Find (' [cc-error-' +errorindex+ '] '). Removeclass (' cc-show ');
      Input.closest ('. Form-group '). Next ('. Help-block '). Find (' [cc-error-' +errorindex+ ']). Removeclass (' cc-show ');
        function Checkinput (input) {var that=$ (input);
        $ (' [Cc-email] ') [0].attributes[0].name var attrs=input.attributes;
        var value=that.val (); for (Var i=0,attr;attr=attrs[i];i++) {if (attr.name== ' Cc-email ') {if (/^[\w-]+ \.[ \w-]+) *@[\w-]+ (\.[ \w-]+) +$/.test (value)) {Hiderror (that,attr.value)}else{ShowError (that,attr.value
              );
            Break }}else if (attr.name== ' Cc-phone ') {if (/\d{11}/.test (value)) {Hiderror (That,attr.value)
            ; }else {sHowerror (That,attr.value);
            Break }}else if (attr.name== ' Cc-max ') {if (value.length>attr.value) {ShowError (that,that.a
              TTR (attr.name+ '-error '));
            Break
            }else {hiderror (that,that.attr (attr.name+ '-error ')); }}else if (attr.name== ' cc-min ') {if (value.length<attr.value) {ShowError (that,that.a
              TTR (attr.name+ '-error '));
            Break
            }else {hiderror (that,that.attr (attr.name+ '-error '));
            }}else if (attr.name== ' Cc-regex ') {var patten=new RegExp (Attr.value);
            if (patten.test (value)) {Hiderror (that,that.attr (attr.name+ '-error '));
              }else {showerror (that,that.attr (attr.name+ '-error '));
            Break }}else if (attr.name== ' Cc-require ') {if (!value| | Value.trim () = = ') {showerror (thaT,attr.value);
            Break
            }else {hiderror (that,attr.value);
          }}} function Checkform (form) {form.find (' Input,textarea '). each (function () {
        Checkinput (this);
      });
        } element.find (' Input,textarea '). focus (function (e) {var that=this;
        First=false;
        Checkinterval=setinterval (function () {checkinput (that);
      },500);
      });
        Element.find (' Input,textarea '). blur (function (e) {first=false;
        Checkinput (this);
      Clearinterval (Checkinterval);
      });
        Element.find (' [Cc-submit] '). Click (function (e) {first=false;
        Clearinterval (Checkinterval);
      Checkform (Element);
      });
    Do not display error prompt Checkform (element) during pre-detection; }
  }
}]);

Corresponding need a little bit of CSS code, the following is written in less

. help-block {
 * {
  &:not (. cc-show) {
   display:none;
  }
 }
}

The corresponding CSS is

. Help-block *:not (. cc-show) {
  display:none;
}

Usage 1

<div>  

Usage 2

  <form class= "Form Shadow-box" cc-form= "Form1" >  

So simple and clear

The above is a small series for you to bring the ANGULARJS based form verification instructions to introduce all the content, I hope that many support cloud Habitat Community ~