Introduction to form validation instructions based on angularJS

After doing development for so long, I have been very annoyed by form verification, which seems simple but not simple, so I wrote a form verification framework, so I no longer have to worry about this annoying verification.

The AngularJS instructions are used here to process the code and it is concise and clear

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

The corresponding one requires a little CSS code, the following is written in LESS

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

corresponding The CSS is

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

Usage 1

<div>
  <h1 id="test">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>

Usage 2

<form class="form shadow-box" cc-form="form1">
  <h3 id="登录">登录</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="" alt="Introduction to form validation instructions based on angularJS" >
    </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 simple and clear