扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >bootstrap-validator如何使用
  • 538

0
分享到

bootstrap-validator如何使用

2024-04-02 19:04:59 538人浏览 泡泡鱼
摘要

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

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

　　需要的js、CSS和img在下面都有说明，耐心点读！

　　需要的js文件:Jquery.min.js，bootstrapValidator.min.js，bootstrap-validator-default.js（自定义的一个默认配置文件，是个人写的，非官方文件）

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

　　//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<len;i++){if((ipArr[i]&netmaskArr[i])!==(gatewayArr[i]&netmaskArr[i])){returnfalse;

　　}

　　}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);

　　}

　　};$.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){

　　$('<li/>')

　　.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('&','&amp;'))>-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('<spanclass="totalTiptext-left">'+fields[field].message+'</span>');

　　}

　　}

　　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%;

　　}.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;

　　}.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;

　　}

　　需要的img为：

　　3.png

　　<!DOCTYPEhtml><html><head>

　　<metacharset="utf-8">

　　<metaname="viewport"content="width=device-width">

　　<title>bootstrap-validator-my</title>

　　<linkrel="stylesheet"href="bootstrap-validator-my.css">

　　</head><body>

　　<divclass="panel">

　　<divclass="panel-head">

　　</div>

　　<divclass="panel-body">

　　<formid="defaultForm"role="form"class="form-signinform"action="reGISterAccount.do"method="post">

　　<divclass="text-right">

　　<divclass="form-groupitem">

　　<labelclass="item-label"for="username">用户名：</label>

　　<inputclass="form-controlitem-txt"type="text"name="username"id="username"/>

　　<ulid="errors-username"data-status=""class="errors"style="display:none;">

　　<spanclass="arrow"></span>

　　</ul>

　　</div>

　　<divclass="form-groupitem">

　　<labelclass="item-label"for="ip">ip：</label>

　　<inputclass="form-controlitem-txt"type="text"name="ip"id="ip"/>

　　<ulid="errors-ip"data-status=""class="errors"style="display:none;">

　　<spanclass="arrow"></span>

　　</ul>

　　</div>

　　<divclass="form-groupitem">

　　<labelclass="item-label"for="password">密码：</label>

　　<inputclass="form-controlitem-txt"type="password"name="password"id="password"/>

　　<ulid="errors-password"data-status=""class="errors"style="display:none;">

　　<spanclass="arrow"></span>

　　</ul>

　　</div>

　　<divclass="form-groupitem">

　　<labelclass="item-label"for="newpassword">新密码：</label>

　　<inputclass="form-controlitem-txt"type="password"name="newpassword"id="newpassword"/>

　　<ulid="errors-newpassword"data-status=""class="errors"style="display:none;">

　　<spanclass="arrow"></span>

　　</ul>

　　</div>

　　<divclass="form-groupitem">

　　<labelclass="item-label"for="repassword">确认密码：</label>

　　<inputclass="form-controlitem-txt"type="password"name="repassword"id="repassword"/>

　　<ulid="errors-repassword"data-status=""class="errors"style="display:none;">

　　<spanclass="arrow"></span>

　　</ul>

　　</div>

　　<divclass="form-groupitem">

　　<spanclass="item-btn"type="submit">确认注册</span>

　　</div>

　　</div>

　　</form>

　　</div>

　　</div>

　　<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

　　<scriptsrc="Https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

　　<scriptsrc="bootstrap-validator-default.js"></script>

　　<script>

　　varconfig={fields:{

　　username:{//验证input项：验证规则

　　message:'Theusernameisnotvalid',validators:{stringLength:{min:6,max:30,message:'用户名长度必须在6到30之间'

　　},regexp:{regexp:/^[a-zA-Z0-9_\.]+$/,message:'用户名由数字字母下划线和.组成'

　　},notEmpty:{message:'用户名不能为空'

　　}

　　}

　　},ip:{message:'ip无效',validators:{ip:{message:'ip格式不正确'

　　}

　　}

　　},password:{message:'密码无效',

　　validators:{pw:{//regexp:/.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./,

　　message:'必须包含数字、英文字母、特殊字符'

　　},stringLength:{min:8,message:'密码长度须大于等于8位'

　　}

　　}

　　},newpassword:{message:'密码无效',validators:{regexp:{regexp:/.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./,message:'密码没通过'

　　},stringLength:{min:8,message:'密码长度须大于等于8位'

　　},different:{//不能和用户名相同

　　field:'password',//需要进行比较的inputname值

　　message:'新密码不能和旧密码相同'

　　},identical:{//相同

　　field:'repassword',//需要进行比较的inputname值

　　message:'新密码和确认密码要一致'

　　}

　　}

　　},repassword:{message:'密码无效',validators:{regexp:{regexp:/.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./,message:'密码没通过'

　　},stringLength:{min:8,message:'密码长度须大于等于8位'

　　},different:{//不能和用户名相同

　　field:'password',//需要进行比较的inputname值

　　message:'确认密码不能和旧密码相同'

　　},identical:{//相同

　　field:'newpassword',//需要进行比较的inputname值

　　message:'新密码和确认密码要一致'

　　}

　　}

　　}

　　}

　　};var$form=$('#defaultForm');

　　$form.initBV(config);

　　$form.find('.item-btn').click(function(e){if($form.valiFields(config.fields)){console.log(1)

　　}else{console.log(0)

　　}

　　});</script></body></html>

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

--结束END--

本文标题: bootstrap-validator如何使用

本文链接: https://lsjlt.com/news/95861.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • bootstrap-validator如何使用
    本篇内容介绍了“bootstrap-validator如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...
    99+
    2024-04-02
  • Bootstrap如何使用
    小编给大家分享一下Bootstrap如何使用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、Bootstrap简介Bootst...
    99+
    2024-04-02
  • hibernate-validator如何使用校验框架
    目录一、前言二、常用注解说明三、定义校验分组四、定义校验Bean五、validator基本使用六、借助BindingResult七、全局拦截校验器八、借助ValidatorUtils...
    99+
    2024-04-02
  • bootstrap Table如何使用
    这篇文章给大家分享的是有关bootstrap Table如何使用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。效果图：案例：html<!-- 表格 --><table&nbs...
    99+
    2023-06-15
  • Bootstrap如何使用面板
    这篇文章主要为大家展示了“Bootstrap如何使用面板”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap如何使用面板”这篇文章吧。面板样式是在很...
    99+
    2024-04-02
  • react如何使用react-bootstrap
    这篇文章主要介绍了react如何使用react-bootstrap，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。react入门之搭配环境（一...
    99+
    2024-04-02
  • 如何使用bootstrap框架
    要使用Bootstrap框架，首先需要在你的项目中引入Bootstrap的CSS和JavaScript文件。你可以在Bootstra...
    99+
    2024-03-01
    bootstrap
  • bootstrap+Validator如何实现模态框、jsp、表单验证 Ajax提交功能
    这篇文章主要介绍bootstrap+Validator如何实现模态框、jsp、表单验证 Ajax提交功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果图：如图，这是使用Valid...
    99+
    2024-04-02
  • Bootstrap中如何使用表格
    这篇文章主要介绍“Bootstrap中如何使用表格”，在日常操作中，相信很多人在Bootstrap中如何使用表格问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstra...
    99+
    2024-04-02
  • Bootstrap中如何使用Tree View
    这篇文章主要介绍Bootstrap中如何使用Tree View，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！A simple and elegant solution to disp...
    99+
    2024-04-02
  • Vue中如何使用Validator表单验证插件
    这期内容当中小编将会给大家带来有关Vue中如何使用Validator表单验证插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。基本使用<div id=&q...
    99+
    2024-04-02
  • React应用中如何使用Bootstrap
    这篇文章将为大家详细讲解有关React应用中如何使用Bootstrap，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。前言我们将把bootstrap,font-awesom...
    99+
    2024-04-02
  • 在BootStrap项目中使用Validator与My97实现一个日期校验功能
    这期内容当中小编将会给大家带来有关在BootStrap项目中使用Validator与My97实现一个日期校验功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。首先my97的API中有自定义事件中有 onp...
    99+
    2023-05-31
    bootstrap validator my97
  • hibernate-validator改进校验框架validator v0.4怎么使用
    这篇文章主要讲解了“hibernate-validator改进校验框架validator v0.4怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“hibernate-vali...
    99+
    2023-07-05
  • Bootstrap中Validator如何实现注册校验和登录错误提示效果
    这篇文章给大家分享的是有关Bootstrap中Validator如何实现注册校验和登录错误提示效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。1、介绍在AdminEAP框架中，...
    99+
    2024-04-02
  • React中如何使用async validator进行表单验证
    这篇文章主要为大家展示了“React中如何使用async validator进行表单验证”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React中如何使用asy...
    99+
    2024-04-02
  • Bootstrap中Blazor组件如何使用
    这篇文章给大家介绍Bootstrap中Blazor组件如何使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1、安装模板dotnet new -i Bootstrap.Blazor.T...
    99+
    2024-04-02
  • 如何使用bootstrap实现分页
    这篇文章主要讲解了“如何使用bootstrap实现分页”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用bootstrap实现分页”吧！ ...
    99+
    2024-04-02
  • bootstrap框架中table如何使用
    这篇文章主要讲解了“bootstrap框架中table如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“bootstrap框架中table如何使用”吧！...
    99+
    2024-04-02
  • Bootstrap中如何使用Toasts组件
    这篇文章主要介绍Bootstrap中如何使用Toasts组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1 吐司消息（Toasts）示例吐司（Toasts）是一种轻量级通知，旨在模...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作