基於angularJS的表單驗證指令介紹_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);    }  }}]);

對應的需要一點點CSS代碼，下面是用LESS寫的

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

對應的CSS就是

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

用法1

<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>

用法2

  <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>

如此簡潔明了

以上就是小編為大家帶來的基於angularJS的表單驗證指令介紹全部內容了，希望大家多多支援雲棲社區~