Bootstrap 4验证带有自定义消息的信用卡 [英] Bootstrap 4 validating credit card with custom messages
问题描述
我正在使用bootstrap 4验证.如何验证信用卡号必须为数字且必须为16位数字并显示相应的消息?
I am using bootstrap 4 validation. How can I validate the credit card number must be numbers and must be 16 digits and show appropriate message?
我想显示三个单独的消息.1.如果输入了注释，则需要信用卡号" 2.如果用户输入"xyz等"，则仅数字"，3.如果用户输入的数字少于16个，则显示消息为"，"CC必须为16"数字".我们如何显示多条自定义消息?
I would like to show three separate messages. 1. If noting is entered, "Credit card number is required" 2. If user enters "xyz etc", then "numbers only" , 3. If user enters less than 16 numbers, then show message as ""CC must be 16 digits". How can we show multiple custom messages ?
请参阅小提琴.谢谢！
<html lang="en">
<head>
</head>
<body class="bg-light">
<form class="needs-validation" novalidate>
<div class="col-md-4 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
https://jsfiddle.net/6p3th7zz/10/
推荐答案
由于未包含jQuery，因此该提琴被打断了.在输入中添加一个HTML5信用卡模式，Bootstrap 4将显示相应的 invalid-feedback 消息...
The fiddle is broken because jQuery wasn't included. Add a HTML5 credit card pattern to the input, and Bootstrap 4 will display the appropriate invalid-feedback message...
https://jsfiddle.net/uq4rb7zy/
<form class="needs-validation" novalidate="" method="POST">
<div class="col-md-4 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}">
<div class="invalid-feedback">
Credit card number is required and must be 16 digits
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
EDIT .Bootstrap不提供单独的验证消息.但是，您可以使用 HTML5验证API ...
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
var ele = form.getElementsByTagName("input")
for (var i = 0; i < ele.length; i++) {
var msg = "", reason = ele[i].validity;
if (reason.valueMissing) {
msg = ele[i].getAttribute("data-value-missing");
}
else if (reason.patternMismatch) {
msg = ele[i].getAttribute("data-pattern-mismatch");
}
else {
// other reason...
}
ele[i].nextElementSibling.innerText=msg;
}
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
然后在输入中，添加 data-value-missing 和 data-pattern-mismatch 消息...
And then on the input, add a data-value-missing and data-pattern-mismatch message...
<input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}" data-value-missing="A credit card number is required" data-pattern-mismatch="The credit card number must be 16 digits">
<div class="invalid-feedback"></div>
这将仅基于 ValidityState 提供不同的消息>(例如，必填vs.模式).它不会匹配导致模式失败的特定原因(例如数字与字符).
This will only provide different messages for based on ValidityState (eg. required vs. pattern). It isn't going to match specific reasons for pattern failure (eg. numbers vs characters).
这篇关于Bootstrap 4验证带有自定义消息的信用卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
