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
 

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

  
test
  

    

      
      

        
密码长度不能超过16位
        
密码最短为6
      
    
    

      
      

        
请输入正确的手机号
      
    
    

      
      

        
请输入传真
      
    
    

      
      

        
请输入正确的邮箱
      
    
    提交
  
 

Usage 2

  
登录
  

    

      
    
  
  

    
请输入正确的手机号
    
请输入手机号
  
  

    

      
    
  
  

    
请输入密码
  
  

    

      
      
    
  
  

    
请输入验证码
  
  

    
      自动登录
    
  
  
没有账号？立即注册
  登录
 

So simple and clear