BootstrapValidator - 禁用给定字段的特定验证
Posted
技术标签:
【中文标题】BootstrapValidator - 禁用给定字段的特定验证【英文标题】：BootstrapValidator - Disable specific validation for given field 【发布时间】：2019-06-04 16:59:55 【问题描述】：有没有办法动态禁用某个字段的特定验证器，但仍希望对同一字段应用其他验证。
示例代码：
$(document).ready(function()
$('#registrationForm')
.bootstrapValidator(
feedbackIcons:
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
,
fields:
fname:
validators:
notEmpty:
message: 'First name is required and cannot be empty'
,
stringLength:
min: 6,
max: 30,
message: 'First name must be more than 6 and less than 30 characters long'
,
regexp:
regexp: /^[a-zA-Z0-9]+$/,
message: 'First name can only consist of alphabetical and digits'
,
lname:
validators:
notEmpty:
message: 'Last name is required and cannot be empty'
,
stringLength:
min: 6,
max: 30,
message: 'Last name must be more than 6 and less than 30 characters long'
,
regexp:
regexp: /^[a-zA-Z0-9]+$/,
message: 'Last name can only consist of alphabetical and digits'
)
.on('error.validator.bv', function(e, data)
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]').hide()
.filter('[data-bv-validator="' + data.validator + '"]').show();
);
);
$(document).on("change keyup paste", "#fName", function ()
if($('#fname').val()==="") $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', true);
else
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', false);
); <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
</head>
<body>
<form id="registrationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<input type="text" autocomplete="off" class="form-control" name="fname" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<input type="text" autocomplete="off" class="form-control" name="lname" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
</body>
</html>在此示例中，我想动态禁用 notEmpty 的验证，但仍希望看到 stringLength 的验证消息
我试过下面的代码，但没有任何运气
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', 'notEmpty', false);
--- 更新---
更新了示例以使其更简单。
我有名字和姓氏字段。如果输入名字，则姓氏不是强制性的。这意味着我不需要notEmpty 的验证消息。但是如果用户决定为姓氏输入一个值，那么它应该满足其他剩余的验证stringLength 和regexp。
【问题讨论】：
【参考方案1】：你搞砸了参数顺序。根据source code 应该是：field，enabled，validatorName：
$('#registrationForm').bootstrapValidator('enableFieldValidators',
'username', false, 'notEmpty');
我已经在你的 sn-p 中进行了测试，它可以工作。
【讨论】：
Link to API【参考方案2】：希望对你有所帮助
$(document).ready(function()
$('#registrationForm')
.bootstrapValidator(
feedbackIcons:
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
,
fields:
username:
validators:
notEmpty:
message: 'The username is required and cannot be empty'
,
stringLength:
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
,
regexp:
regexp: /^[a-zA-Z0-9]+$/,
message: 'The username can only consist of alphabetical and digits'
)
.on('error.validator.bv', function(e, data)
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]').hide()
.filter('[data-bv-validator="' + data.validator + '"]').show();
);
);
$(document).on("change", "#inlineCheckbox1", function ()
if($(this).is(":checked"))
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', true,'notEmpty');
else
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', false,'notEmpty');
);#registrationForm
padding:2rem;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
</head>
<body>
<form id="registrationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Username</label>
<div class="col-sm-4">
<input type="text" autocomplete="off" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
<div class="form-group">
<label for="inlineCheckbox1">Validate</label>
<input type="checkbox" id="inlineCheckbox1" value="option1" checked>
</div>
</form>
</body>
</html>【讨论】：
在这种情况下，我们将关闭username 的所有验证。但就我而言，我只需要单独关闭notEmpty 验证。 stringLength 和 regexp 对同一输入字段的验证仍然有效。以上是关于BootstrapValidator - 禁用给定字段的特定验证的主要内容，如果未能解决你的问题，请参考以下文章