基于angularJS的表单验证指令介绍

做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁，于是写了个表单验证的框架，再也不用担心这个心烦的验证了。

这里使用AngularJS的指令进行处理代码及其简洁明了

下面是指令JS代码

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(first){          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.attr(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.attr(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);      });      //预检测时不显示错误提示      checkForm(element);    }  }}]);