基于angularJS的表单验证指令介绍
做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了。
这里使用AngularJS的指令进行处理代码及其简洁明了
下面是指令JS代码
app.directive('ccForm',['$parse',function($parse){ return{ restrict:'A', link:function(scope,element,attrs){ varfirst=true; varerrors=0; varcheckInterval; functionshowError(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'); } functionhidError(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'); } functioncheckInput(input){ varthat=$(input); //$('[cc-email]')[0].attributes[0].name varattrs=input.attributes; varvalue=that.val(); for(vari=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; } }elseif(attr.name=='cc-phone'){ if(/\d{11}/.test(value)){ hidError(that,attr.value); }else{ showError(that,attr.value); break; } }elseif(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')); } }elseif(attr.name=='cc-min'){ if(value.length<attr.value){ showError(that,that.attr(attr.name+'-error')); break; }else{ hidError(that,that.attr(attr.name+'-error')); } }elseif(attr.name=='cc-regex'){ varpatten=newRegExp(attr.value); if(patten.test(value)){ hidError(that,that.attr(attr.name+'-error')); }else{ showError(that,that.attr(attr.name+'-error')); break; } }elseif(attr.name=='cc-require'){ if(!value||value.trim()==''){ showError(that,attr.value); break; }else{ hidError(that,attr.value); } } } } functioncheckForm(form){ form.find('input,textarea').each(function(){ checkInput(this); }); } element.find('input,textarea').focus(function(e){ varthat=this; first=false; checkInterval=setInterval(function(){ checkInput(that); },500); }); element.find('input,textarea').blur(function(e){ first=false; checkInput(this); clearInterval(checkInterval); }); element.find('[cc-submit]').click(function(e){ first=false; clearInterval(checkInterval); checkForm(element); }); //预检测时不显示错误提示 checkForm(element); } } }]);
对应的需要一点点CSS代码,下面是用LESS写的
.help-block{ *{ &:not(.cc-show){ display:none; } } }
对应的CSS就是
.help-block*:not(.cc-show){ display:none; }
用法1
<div> <h1>test</h1> <formcc-form="form1"> <divclass="from-group"> <inputtype="password"ng-model="user.password"cc-max="16"cc-max-error="1"cc-min="6"cc-min-error="2"> <divclass="help-block"> <pcc-error-1>密码长度不能超过16位</p> <pcc-error-2>密码最短为6</p> </div> </div> <divclass="form-group"> <inputng-model="user.phone"cc-regex="\d{11}"cc-regex-error="1"> <divclass="help-block"> <pcc-error-1>请输入正确的手机号</p> </div> </div> <divclass="form-group"> <inputng-model="user.fax"cc-require="1"> <divclass="help-block"> <pcc-error-1>请输入传真</p> </div> </div> <divclass="form-group"> <inputng-model="user.email"cc-email="1"> <divclass="help-block"> <pcc-error-1>请输入正确的邮箱</p> </div> </div> <buttontype="button"cc-submit>提交</button> </form> </div>
用法2
<formclass="formshadow-box"cc-form="form1"> <h3>登录</h3> <divclass="form-group"> <divclass="cellphone"> <inputplaceholder="手机号"ng-model="user.loginName"name="loginName"cc-regex="\d{11}"cc-regex-error="1"cc-require="2"/> </div> </div> <divclass="help-block"> <pcc-error-1>请输入正确的手机号</p> <pcc-error-2>请输入手机号</p> </div> <divclass="form-group"> <divclass="password"> <inputplaceholder="密码"type="password"ng-model="user.password"name="password"cc-require="1"/> </div> </div> <divclass="help-block"> <pcc-error-1>请输入密码</p> </div> <divclass="form-group"> <divclass="vcode"> <inputplaceholder="验证码"ng-model="user.vcode"name="vcode"cc-require="1"> <imgsrc=""> </div> </div> <divclass="help-block"> <pcc-error-1>请输入验证码</p> </div> <divclass="checkbox"> <label> <inputtype="checkbox"ng-model="user.rememberPass"ng-true-value="true"ng-false-value="false">自动登录 </label> </div> <pclass="to-register">没有账号?<ahref="#/main/register">立即注册</a></p> <buttontype="button"ng-click="login(1)"cc-submit>登录</button> </form>
如此简洁明了
以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了,希望大家多多支持毛票票~