当前位置:小鱼儿玄机二站 > 关于计算机 > 实现bootstrapValidator下的全局验证,BootstrapValidat

实现bootstrapValidator下的全局验证,BootstrapValidat

文章作者:关于计算机 上传时间:2019-09-03

BootstrapValidator 是一款特别针对Boostrap v3的表单查验jQuery插件,可以落实无数常用的验证功能,并且易于扩展,还协理汉语!对于bootstrap客户来讲能够开箱即用。

一、前言

前置:

BootstrapValidator是根据bootstrap3的jquery表单验证插件,是最符合bootstrap框架的表单验证插件,在职业中用到此框架就写下团结在使用中积淀的部分体验

  引入jQuery、bootstrap、bootstrapValidator

二、难点汇报

  难题陈说:

当开关的项目为submit时,使用bootstrapValidator的isValid()可以使验证表单符合规律工作,但当button的type类型为button时,只调用bootstrapValidator的isValid()方法十分小概符合规律干活。那时候就供给接纳bootstrapValidator的validate()方法开展激活。

  项目中需求具备的表单输入框中都不能够输入&符号。未有在bootstrap中找到有一些子可用,只好自身动手了

三、项目代码

思路:

1、JSP中

  使用正则。

<div id="addAdminDialog" class="modal fade" tabindex="-1"> 
<div class="modal-dialog cy-modal-dialog-f"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button class="close" data-dismiss="modal">×</button> 
<h4 class="modal-title" id="myLargeModalLabel">新增管理员</h4> 
</div> 
<div class="modal-body"> 
<form id="addAdminForm" method="post" action="${ctx}/admin/operator/add.htm" class="form-horizontal"> 
<div class="form-group"> 
<label class="form-label text-bold" for="">登录名</label> 
<input class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"/> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">用户名</label> 
<input class="form-control" placeholder="" type="text" name="userName" id="addUserName" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">密码</label> 
<input class="form-control" placeholder="" type="password" name="password" id="addPassword" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">角色</label> 
<div class="form-group"> 
<div class="col-md-10 col-xs-10"> 
<div class="checkbox cy-nopadding" id="addRoles"> 
<c:forEach var="role" items="${roles}"> 
<label name="addRoleLabel" class="form-checkbox form-icon form-text"><input type="checkbox" id="addRole_${role.id}" name="roles" value="${role.id}"> ${role.roleName}</label> 
</c:forEach> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
<!--Modal footer--> 
<div class="modal-footer"> 
<button class="btn btn-primary" onclick="addAdmin();">确定</button> 
<button data-dismiss="modal" class="btn btn-default" type="button">取消</button> 
</div> 
</div> 
</div> 
</div> 

  分三种处境,第一种,如若输入框有自个儿的正则验证则不用去管(一般的话使用正则验证是严控输入的);第三种,若无正则则要求增加无法输入&的正则。

2、JS

  须求重载bootstrapValidator开头化函数,依照上边包车型大巴三种意况改进开端化的安装项。最终要还原原本的bootstrapValidator函数(这一步是必需的,原本的bootstrapValidator函数有投机的一大堆关联的东东,不可能错过);

var faIcon = { 
valid: 'glyphicon glyphicon-ok', 
invalid: 'glyphicon glyphicon-remove', 
validating: 'glyphicon glyphicon-refresh' 
} 
//新增管理员前台校验 
$("#addAdminForm").bootstrapValidator({ 
message: 'This value is not valid', 
//反馈图标 
feedbackIcons:faIcon, 
fields: { 
loginName:{ 
message:'登录名无效', 
validators:{ 
notEmpty:{ 
message:'登录名不能为空' 
}, 
StringLength:{ 
min:5, 
max:30, 
message:'用户名长度大于6位并且小于30位' 
}, 
regexp:{ 
regexp:/^[a-zA-Z0-9_]+$/, 
message:'用户名只能由字母、数字和下划线' 
} 
} 
}, 
userName: { 
message: '用户名格式不正确', 
validators: { 
notEmpty: { 
message: '用户名不能为空' 
}, 
stringLength: { 
min: 6, 
max: 30, 
message: '用户名长度大于6位并且小于30位' 
}, 
regexp: { 
regexp: /^[a-zA-Z0-9_]+$/, 
message: '用户名只能由字母、数字和下划线' 
} 
} 
}, 
password: { 
validators: { 
notEmpty: { 
message: '邮箱不能为空' 
}, 
emailAddress: { 
message: '输入的不是一个有效的电子邮件地址' 
} 
} 
} 
} 
}); 

// 新增操作员 
function addAdmin() { 
/*手动验证表单,当是普通按钮时。*/ 
$('#addAdminForm').data('bootstrapValidator').validate(); 
if(!$('#addAdminForm').data('bootstrapValidator').isValid()){ 
return ; 
} 
$("#addAdminForm").ajaxSubmit({ 
dataType : 'json', 
type : "post", 
success : function(json) { 
if (json.status == "succ") { 
doQuery(); 
Modal.alert({ 
msg : "操作成功" 
}); 
$("#addAdminDialog").modal('hide'); 
} else { 
Modal.alert({ 
msg : json.msg 
}); 
} 
}, 
error : function() { 
Modal.alert({ 
msg : "操作失败" 
}); 
} 
}); 
} 

实现:

四、效果图

/*add chenhua 2015.10.16 重写bootstrapValidator方法?给每一个验证项都添加禁止输入"&"符号*/ 
$(function(){  //保存原始的bootstrapValidator 
  var overwrite = $.fn.bootstrapValidator;   //重载bootstrapValidator
  $.fn.bootstrapValidator = function(options){ 
    //恢复原来的bootstrapValidator,因为其加了很多数据是不能丢失的 
    $.fn.bootstrapValidator = overwrite; 
            //这里有两种做法,第一种是直接修改arguments内容,使其包含不能输入&的验证,然后调用即可;    //第二种是先使用arguments来初始化,然后使用调用bootstrapValidator的函数来给非正则表达式验证的项添加不能输入&的验证    //这里我们使用了第二中。  
    var validtor = overwrite.apply(this,arguments); 
    if($.type(arguments[0]) == "object"){ 
      var vtor = this.data("bootstrapValidator"),      //过滤出输入框表单项   
      fileds = this.find("input[name][type='hidden'],input[name][type='password'],input[name][type='text'],textarea[name]").not(":disabled,[type='hidden']"); 
      fileds.each(function(){ 
        //本身没有正则验证才添加不能输入&的验证 
        if(!vtor.getOptions($(this).attr('name'),'regexp','regexp')){ 
         vtor.addField($(this).attr('name'), 
            { 
              validators: { 
                regexp: { 
                  regexp: /^[^&]*$/, 
                  message: "不能包含&字符" 
                } 
              } 
          }) 
        } 
      }) 
    } 
    return validtor; 
  } 
}) 

图片 1

如上内容是本子之家作者给咱们介绍的基于jQuery 达成bootstrapValidator下的大局验证,希望大家爱不释手。

图片 2

您大概感兴趣的小说:

  • JS组件Form表单验证神器BootstrapValidator
  • 实用又美好的BootstrapValidator表单验证插件
  • BootstrapValidator超详细教程(推荐)
  • Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
  • jquery插件bootstrapValidator数据证实详解
  • Bootstrapvalidator校验、校验清除重新载入参数的落到实处代码(推荐)
  • jquery插件bootstrapValidator表单验证详解
  • BootstrapValidator不触发校验的落实代码
  • bootstrapValidator bootstrap-select验证不可用的消除办法
  • bootstrapvalidator之API学习课程

上述所述是作者给我们介绍的BootstrapValidator不触发校验的完毕代码,希望对大家具有帮忙,如果大家有另外疑问请给自家留言,笔者会及时回复我们的。在此也特别多谢大家对台本之家网址的扶助!

您恐怕感兴趣的篇章:

  • JS组件Form表单验证神器BootstrapValidator
  • 听别人讲jQuery 达成bootstrapValidator下的大局验证
  • 实用又能够的BootstrapValidator表单验证插件
  • BootstrapValidator超详细教程(推荐)
  • Bootstrap中的表单验证插件bootstrapValidator使用办法整理(推荐)
  • jquery插件bootstrapValidator数据证实详解
  • Bootstrapvalidator校验、校验清除重新恢复设置的完毕代码(推荐)
  • jquery插件bootstrapValidator表单验证详解
  • bootstrapValidator bootstrap-select验证不可用的化解办法
  • bootstrapvalidator之API学习课程

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:实现bootstrapValidator下的全局验证,BootstrapValidat

关键词: