下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁，于是写了个表单验证的框架，再也不用担心这个心烦的验证了。
这里使用AngularJS的指令进行处理代码及其简洁明了
下面是指令JS代码
app.direct<span style="color:transparent">来源gaodai#ma#com搞*代#码网</span>ive('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</div><p>对应的需要一点点CSS代码，下面是用LESS写的</p><div class="gaodaimacode"><pre class="prettyprint linenums"> .help-block { * { &:not(.cc-show) { display: none; } } }
对应的CSS就是
.help-block *:not(.cc-show) { display: none; }
用法1
<div> <h1>test</h1> <div class="from-group"> <div class="help-block"> <p>密码长度不能超过16位</p><p>密码最短为6</p></div></div><div class="form-group"> <div class="help-block"> <p>请输入正确的手机号</p></div></div><div class="form-group"> <div class="help-block"> <p>请输入传真</p></div></div><div class="form-group"> <div class="help-block"> <p>请输入正确的邮箱</p></div></div><button type="button">提交</button></div>
用法2
<h3>登录</h3><div class="form-group"> <div class="cellphone"> </div></div><div class="help-block"> <p>请输入正确的手机号</p><p>请输入手机号</p></div><div class="form-group"> <div class="password"> </div></div><div class="help-block"> <p>请输入密码</p></div><div class="form-group"> <div class="vcode"> </div></div><div class="help-block"> <p>请输入验证码</p></div><div class="checkbox"> <label> 自动登录 </label></div><p class="to-register">没有账号？立即注册</p><button type="button">登录</button>
如此简洁明了
以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了，希望大家多多支持gaodaima搞代码网~
以上就是基于angularJS的表单验证指令介绍的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：基于angularJS的表单验证指令介绍
转载请注明原文链接：基于angularJS的表单验证指令介绍
