Einführung in Formularvalidierungsanweisungen basierend auf AngularJS

Ich habe so lange entwickelt und war sehr irritiert von der Formularüberprüfung, die einfach, aber nicht einfach zu sein scheint. Deshalb habe ich ein Formularüberprüfungs-Framework geschrieben, damit ich mir um diese lästige Überprüfung keine Sorgen mehr machen muss.

Die AngularJS-Anweisungen werden hier zur Verarbeitung des Codes verwendet und sind prägnant und klar

Das Folgende ist der JS-Anweisungscode

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+&#39;-error&#39;));
              break;
            }else {
              hidError(that,that.attr(attr.name+&#39;-error&#39;));
            }
          }else if(attr.name==&#39;cc-regex&#39;){
            var patten=new RegExp(attr.value);
            if(patten.test(value)){
              hidError(that,that.attr(attr.name+&#39;-error&#39;));
            }else {
              showError(that,that.attr(attr.name+&#39;-error&#39;));
              break;
            }
          }else if(attr.name==&#39;cc-require&#39;){
            if(!value||value.trim()==&#39;&#39;){
              showError(that,attr.value);
              break;
            }else {
              hidError(that,attr.value);
            }
          }
        }
      }
      function checkForm(form) {
        form.find(&#39;input,textarea&#39;).each(function () {
          checkInput(this);
        });
      }
      element.find(&#39;input,textarea&#39;).focus(function (e) {
        var that=this;
        first=false;
        checkInterval=setInterval(function () {
          checkInput(that);
        },500);
      });
      element.find(&#39;input,textarea&#39;).blur(function (e) {
        first=false;
        checkInput(this);
        clearInterval(checkInterval);
      });
      element.find(&#39;[cc-submit]&#39;).click(function (e) {
        first=false;
        clearInterval(checkInterval);
        checkForm(element);
      });
      //预检测时不显示错误提示
      checkForm(element);
    }
  }
}]);

Der entsprechende Code erfordert ein wenig CSS-Code.

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

Der entsprechende CSS-Code ist

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

>

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

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

So prägnant und klar