bootstrap-validator如何使用

本篇内容介绍了“bootstrap-validator如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

10多年的福山网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整福山建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“福山网站设计”,“福山网站推广”以来,每个客户项目都认真落实执行。

需要的js、css和img在下面都有说明,耐心点读!

需要的js文件:jquery.min.js,bootstrapValidator.min.js,bootstrap-validator-default.js(自定义的一个默认配置文件,是个人写的,非官方文件)

前两个文件cdn上都有,bootstrap-validator-default.js内容如下:

/*默认规则start*///ip格式$.fn.bootstrapValidator.validators.ip={//message:"ip格式不正确"

validate:function(validator,$field,options){varvalue=$field.val(),

ipReg=/^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;if(value===''){returntrue;

}returnipReg.test(value);

}

};//password格式$.fn.bootstrapValidator.validators.pw={//message:"必须包含数字、英文字母、特殊字符"

validate:function(validator,$field,options){varvalue=$field.val(),

ipReg=/.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./;

if(typeofvalue!='string'||!ipReg.test(value)){returnfalse;

}returntrue;

}

};//不允许有空格$.fn.bootstrapValidator.validators.noSpace={//message:"必须包含数字、英文字母、特殊字符"

validate:function(validator,$field,options){varvalue=$field.val();if(typeofvalue!='string'||value.indexOf('')>-1){returnfalse;

}returntrue;

}

};//网关格式$.fn.bootstrapValidator.validators.mask={//message:"网关不可达"

validate:function(validator,$field,options){varipArr=$field.parent().parent().find('input[name="ip"]').val().split('.'),

gatewayArr=$field.parent().parent().find('input[name="gateway"]').val().split('.'),

value=$field.val(),

netmaskArr=value.split('.'),

len=4,

i=0;if(ipArr.length!==len||gatewayArr.length!==len||netmaskArr.length!==len){returnfalse;

}for(;i

}

}returntrue;

}

};//邮箱表单验证规则$.fn.bootstrapValidator.validators.mail={//message:"邮箱格式不正确"

validate:function(validator,$field,options){varmail=/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/,

value=$field.val();returnmail.test(value);

}

};//电话验证规则$.fn.bootstrapValidator.validators.phone={//message:"0371-68787027"

validate:function(validator,$field,options){varphone=/^0\d{2,3}-\d{7,8}$/,

value=$field.val();returnphone.test(value);

}

};//区号验证规则$.fn.bootstrapValidator.validators.ac={//message:"区号如:010或0371"

validate:function(validator,$field,options){varac=/^0\d{2,3}$/,

value=$field.val();returnac.test(value);

}

};//无区号电话验证规则$.fn.bootstrapValidator.validators.noactel={//message:"电话格式如:68787027"

validate:function(validator,$field,options){varnoactel=/^\d{7,8}$/,

value=$field.val();returnnoactel.test(value);

}

};/*默认规则end*/$.fn.extend({

initBV:function(config){//初始化函数

if(this.length==0||this[0].tagName!=='FORM'){returnfalse;

}var$form=this.eq(0),

$inputs=$form.find('input'),

$errors=$form.find('.errors'),

$itemBtn=$form.find('.item-btn');//让ul.errors中显示验证项

functioninitTips(fields){varvalidator,notEmpty,$errField;

fields=fields.fields||fields;if(!fields)returnfalse;for(varfieldinfields){

$errField=$form.find('#errors-'+field);

$errField.hide().find('li').remove();

validators=fields[field].validators;

notEmpty=false;for(varvaliinvalidators){

$('

  • ')

    .addClass('text-left')

    .attr('data-field',field)

    .attr('data-vali',vali)

    .html(validators[vali].message)

    .appendTo($errField);if(vali=='notEmpty'){

    notEmpty=true;

    }

    }if(notEmpty){

    $errField.data('status','error');

    }else{

    $errField.data('status','success');

    }

    }returnfalse;

    }

    initTips(config.fields);

    $form.bootstrapValidator(config)

    .on('success.form.bv',function(e,data){//点击提交之后

    //Preventformsubmission

    e.preventDefault();returnfalse;

    }).on('success.field.bv',function(e,data){varremoveClass,successClass;if(data.element[0].value){//验证成功

    console.log('realsuccess')

    removeClass='error';

    addClass='success';

    }else{//验证的其实是''(空字符串),但也被算是success事件

    console.log('notsuccess');

    removeClass='errorsuccess';

    addClass='normal';

    }

    $errors.hide();

    $form.find('#errors-'+data.field).show().data('status','success').find('li').each(function(idx,item){

    $(item).removeClass(removeClass).addClass(addClass);

    });

    }).on('error.field.bv',function(e,data){//data.bv-->TheBootstrapValidatorinstance

    //data.field-->Thefieldname

    //data.element-->Thefieldelement

    //Getthemessagesoffield

    varfield=data.field;varmessages=data.bv.getMessages(data.element);//Removethefieldmessagesifthey'realreadyavailable

    $errors.hide();

    $form.find('#errors-'+data.field).show().data('status','error').find('li').each(function(idx,item){

    item=$(item);if(messages.indexOf(item.text().replace('&','&'))>-1||config.fields[data.field].validators.notEmpty&&messages.indexOf(config.fields[data.field].validators.notEmpty.message)>-1){

    item.removeClass('success').addClass('error');

    }else{

    item.removeClass('error').addClass('success');

    }

    });//Hidethedefaultmessage

    //$field.data('bv.messages')returnsthedefaultelementcontainingthemessages

    data.element

    .data('bv.messages')

    .find('.help-block[data-bv-for="'+data.field+'"]')

    .hide();

    });

    $inputs.blur(function(e){

    $errors.hide();

    })

    $inputs.focus(function(e){

    $errors.hide();

    $(this).trigger('input');

    $(this).parent().find('.totalTip').hide();

    $form.find('#errors-'+this.name).show();

    })

    $itemBtn.click(function(e){

    e.preventDefault();

    $form.find('input').trigger('input');

    $('.errors').hide();returnfalse;

    });

    },

    valiFields:function(fields){//验证fields是否验证通过,未通过则提示信息

    varstatus=true,

    fieldStatus,$errField,$errFiePar,$totalTip;

    fields=fields.fields||fields;if(!fields)returnfalse;for(varfieldinfields){

    $errField=$('#errors-'+field);

    fieldStatus=$errField.data('status');if(fieldStatus=='error'){

    $errFiePar=$errField.parent(),

    $totalTip=$errFiePar.find('.totalTip');if($totalTip.length){

    $totalTip.show();

    }else{

    $errFiePar.append(''+fields[field].message+'');

    }

    }

    status=status&&fieldStatus=='success';

    }returnstatus;

    }

    });

    需要的css文件:bootstrap-validator-my.css(自定义的一个默认配置文件,是个人写的,非官方文件)

    bootstrap-validator-my.css内容如下:

    *{margin:0;padding:0;box-sizing:border-box;

    }input,button{outline:none;

    }ul{list-style:none;

    }/*字体样式*/.text-right{text-align:right;

    }.text-left{text-align:left;

    }.text-center,.center{text-align:center;

    }.bold{font-weight:bold;

    }/*位置样式*/.relative{position:relative;

    }.absolute{position:absolute;

    }.fixed{position:fixed;

    }/*浮动相关*/.float,.float-left{float:left;

    }.float-right{float:right;

    }.clear:after{content:".";display:block;height:0;visibility:hidden;clear:both;

    }.pageWrap{height:auto;min-height:100%;

    }/*panelstart*/.panel{border:1pxsolid#6AC7DC;border-radius:4px;background:#fff;

    }.panel>div:first-child{border-bottom:1pxsolid#6AC7DC;height:35px;line-height:35px;border-radius:4px;

    }.panel.panel-head{padding:020px;position:relative;

    }.panel.panel-head.panel-title{font-weight:bold;

    }.panel.panel-head.panel-btns{position:absolute;right:20px;

    }.panel.panel-head.panel-btnsspan{border-radius:5px;color:#fff;padding:2px8px;

    }.panel.panel-head.panel-btnsspan:hover{cursor:pointer;

    }.panel.panel-head.panel-btns.panel-btn-add{background:#3686D1;

    }.panel.panel-body{padding:20px;

    }.panel.panel-body.panel-table{width:100%;border-collapse:collapse;text-align:center;

    }.panel.panel-body.panel-tabletd,.panel.panel-body.panel-tableth{border:1pxsolid#E0E0E0;font-size:14px;padding:08px;font-style:normal;

    }.panel.panel-body.panel-tableth{height:33px;line-height:33px;

    }.panel.panel-body.panel-tabletd{height:28px;line-height:28px;

    }/*panelend*//*所有表单元素样式start*/.form{display:flex;justify-content:center;padding:20px;

    }.form.item-txt,.form.item-sel{width:300px;height:30px;line-height:30px;border:1pxsolid#CCCCCC;padding:010px;

    }.form.item-dis{background:#E3E3E3;color:#999999;

    }.form.item-dis:hover{cursor:not-allowed;

    }.form.item{font-size:0;position:relative;margin-bottom:15px;

    }.form.totalTip{position:absolute;left:386px;top:0;width:235px;height:30px;line-height:30px;color:red;

    }.form.errors{width:235px;position:absolute;left:386px;top:0;border:1pxsolid#ddd;box-shadow:1px1px1px#efefef;background:#f9f9f9;padding:5px10px;z-index:100;

    }.form.errorsli{line-height:20px;padding-left:18px;font-size:12px;color:#666;font-family:Tahoma,Helvetica,"MicrosoftYahei","微软雅黑",Arial,STHeiti;background:url(reg_icons.png)no-repeat-86px-112px;

    }.form.errors.arrow{position:absolute;top:8px;left:-6px;height:0px;width:0px;border-top:6pxsolidtransparent;border-right:6pxsolid#ddd;border-bottom:6pxsolidtransparent;

    }.form.errors.arrow:after{content:'';position:absolute;top:-5px;left:1px;border-top:5pxsolidtransparent;border-right:5pxsolid#f9f9f9;border-bottom:5pxsolidtransparent;

    }.form.errorsli.normal{background-position:-86px-112px;

    }.form.errorsli.success{background-position:-86px-128px;

    }.form.errorsli.error{background-position:-86px-144px;color:red;

    }.form.item*{font-size:14px;

    }.form.item.item-label{display:inline-block;

    }.form.item.item-btn{height:30px;width:300px;line-height:30px;display:inline-block;background:#3686D1;color:#fff;font-weight:bold;text-align:center;

    }.form.item.item-btn:hover{cursor:pointer;

    }.form.error-cont{color:gray;display:inline-block;text-align:left;font-size:12px;height:15px;position:relative;white-space:nowrap;

    }.form.error-cont.icon{position:absolute;top:1px;

    }.form.error-cont.tip{position:absolute;left:20px;font-size:12px;

    }.form.redtip{color:red;font-weight:bold;display:inline-block;height:30px;line-height:30px;

    }/*所有表单元素样式end*/

    需要的img为:

    3.png

    bootstrap-validator-my

  • 用户名:

    ip:

    密码:

    新密码:

    确认密码:

    确认注册

    “bootstrap-validator如何使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


    当前标题:bootstrap-validator如何使用
    链接URL:http://azwzsj.com/article/pjdgge.html

    其他资讯