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

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);    }  }}]);

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

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

<div>  <h1>test</h1>  <form cc-form="form1">    <div class="from-group">      <input type="password" ng-model="user.password" cc-max="16" cc-max-error="1" cc-min="6" cc-min-error="2">      <div class="help-block">        <p cc-error-1>密码长度不能超过16位</p>        <p cc-error-2>密码最短为6</p>      </div>    </div>    <div class="form-group">      <input ng-model="user.phone" cc-regex="/d{11}" cc-regex-error="1">      <div class="help-block">        <p cc-error-1>请输入正确的手机号</p>      </div>    </div>    <div class="form-group">      <input ng-model="user.fax" cc-require="1">      <div class="help-block">        <p cc-error-1>请输入传真</p>      </div>    </div>    <div class="form-group">      <input ng-model="user.email" cc-email="1">      <div class="help-block">        <p cc-error-1>请输入正确的邮箱</p>      </div>    </div>    <button type="button" cc-submit>提交</button>  </form></div>

  <form class="form shadow-box" cc-form="form1">    <h3>登录</h3>    <div class="form-group">      <div class="cellphone">        <input placeholder="手机号" ng-model="user.loginName" name="loginName" cc-regex="/d{11}" cc-regex-error="1" cc-require="2"/>      </div>    </div>    <div class="help-block">      <p cc-error-1>请输入正确的手机号</p>      <p cc-error-2>请输入手机号</p>    </div>    <div class="form-group">      <div class="password">        <input placeholder="密码" type="password" ng-model="user.password" name="password" cc-require="1"/>      </div>    </div>    <div class="help-block">      <p cc-error-1>请输入密码</p>    </div>    <div class="form-group">      <div class="vcode">        <input placeholder="验证码" ng-model="user.vcode" name="vcode" cc-require="1">        <img src="">      </div>    </div>    <div class="help-block">      <p cc-error-1>请输入验证码</p>    </div>    <div class="checkbox">      <label>        <input type="checkbox" ng-model="user.rememberPass" ng-true-value="true" ng-false-value="false">自动登录      </label>    </div>    <p class="to-register">没有账号？<a href="#/main/register">立即注册</a></p>    <button type="button" ng-click="login(1)" cc-submit>登录</button>  </form>