做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁，于是写了个表单验证的框架，再也不用担心这个心烦的验证了。

这里使用angularJS的指令进行处理代码及其简洁明了

下面是指令JS代码

app.directive('ccForm',['$parse',function ($parse) {
    return {
        restrict:'A',link:function (scope,element,attrs) {
            var first=true;
            var errors=0;
            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);
                var attrs=input.getAttributeNames();
                var value=that.val();
                for(var i=0,attr;attr=attrs[i];i++){
                    var attrValue=that.attr(attr);
                    if(attr=='cc-email'){
                        if(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)){
                            hidError(that,attrValue)
                        }else{
                            showError(that,attrValue);
                            break;
                        }
                    }else  if(attr=='cc-phone'){
                        if(/\d{11}/.test(value)){
                            hidError(that,attrValue);
                        }else {
                            showError(that,attrValue);
                            break;
                        }
                    }else if(attr=='cc-max'){
                        if(value.length>attrValue){
                            showError(that,that.attr(attr+'-error'));
                            break;
                        }else {
                            hidError(that,that.attr(attr+'-error'));
                        }
                    }else if(attr=='cc-min'){
                        if(value.length<attrValue){
                            showError(that,that.attr(attr+'-error'));
                        }
                    }else if(attr=='cc-regex'){
                        var patten=new RegExp(attrValue);
                        if(patten.test(value)){
                            hidError(that,that.attr(attr+'-error'));
                        }else {
                            showError(that,that.attr(attr+'-error'));
                            break;
                        }
                    }else if(attr=='cc-require'){
                        if(!value||value.trim()==''){
                            showError(that,attrValue);
                            break;
                        }else {
                            hidError(that,attrValue);
                        }
                    }
                }
            }
            function checkForm(form) {
                form.find('input,textarea').each(function () {
                    checkInput(this);
                });
            }
            element.find('input,textarea').blur(function (e) {
                first=false;
                checkInput(this);
            });
            element.find('[cc-submit]').click(function (e) {
                first=false;
                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>

如此简洁明了