做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁，于是写了个表单验证的框架，再也不用担心这个心烦的验证了。
这里使用AngularJS的指令进行处理代码及其简洁明了
下面是指令JS代码
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
对应的需要一点点CSS代码，下面是用LESS写的
.help-block {
* {
&:not(.cc-show) {
display: none;
}
}
}
对应的CSS就是
.help-block *:not(.cc-show) {
display: none;
}
用法1
test
密码长度不能超过16位
密码最短为6
请输入正确的手机号
请输入传真
请输入正确的邮箱
用法2
登录
请输入正确的手机号
请输入手机号
请输入密码
![]()
请输入验证码
没有账号？立即注册
如此简洁明了
以上就是小编为大家带来的基于angularJS的表单验证指令介绍全部内容了，希望大家多多支持~
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有