基于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的表单验证指令介绍全部内容了，希望大家多多支持毛票票~