所以我试图根据卡片类型验证信用卡号码。基本上，如果您选择万事达卡，卡号应仅从5开始，签证从4等开始。
我在下面添加了一个jsfiddle代码。
http://jsfiddle.net/Lespr8dc/6/
表格html
<form action="/echo/html/" method="POST" data-abide>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
<div class="small-12 medium-8 columns medium-centered">
<div class="row">
<div class="small-12 medium-3 columns">
<label for="card_type">Card Type</label>
</div>
<div class="small-12 medium-9 columns">
<select class="card_type" required="required" data-abide-validator="cType" id="card_type" name="card_type">
<option value="">Please select</option>
<option value="master" selected="selected">Mastercard</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
</select>
<small class="error text-left">Card type is required.</small>
</div>
</div>
</div>
<div class="small-12 medium-8 columns medium-centered">
<div class="row">
<div class="small-12 medium-3 columns">
<label for="card_number">Card Number</label>
</div>
<div class="small-12 medium-9 columns">
<input class="card_number" required="required" data-abide-validator="cNumber" name="card_number" type="text" value="1234" id="card_number">
<small class="error text-left overrides__no-margin">Valid Card number is required.</small>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
Jquery相关
$(document).foundation({
named_queries: {
retina_large_up: 'only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)',
retina_medium_up: 'only screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
},
abide: {
validators: {
cNumber: function (el, required, parent) {
//on keyup, start the countdown
$(el).on('blur', function () {
var validationNumber, error, minlength, maxlength;
if (required) {
var cardType = $('#card_type').val();
var cardNumberDigit = el.value.substring(0, 1);
switch (cardType) {
case 'master':
validationNumber = 5;
minlength = 16;
maxlength = 16;
error = 'Please enter a valid Master Card.';
break;
case 'visa':
validationNumber = 4;
minlength = 13;
maxlength = 16;
error = 'Please enter a valid Visa Card.';
break;
case 'amex':
validationNumber = 3;
minlength = 15;
maxlength = 15;
error = 'Please enter a valid Amex Card.';
break;
default:
validationNumber = 0;
minlength = 13;
maxlength = 16;
error = 'Please enter a valid Card Number.';
}
if (cardNumberDigit == validationNumber && ((el.value).length >= minlength && (el.value).length <= maxlength)) {
error = '';
console.log('done');
//$(parent).find('.custom-error').css('display', 'none');
//console.log(' validationNumber ' + validationNumber + ' error ' + error + ' cardNumberDigit ' + cardNumberDigit);
return true;
} else {
console.log('error');
//$(parent).find('.custom-error').text(error).css('display', 'block');
console.log(' validationNumber ' + validationNumber + ' error ' + error + ' cardNumberDigit ' + cardNumberDigit);
return false;
}
}
});
},
cType: function (el, required, parent) {
//on keyup, start the countdown
$(el).on('change', function () {
var validationNumber, error, minlength, maxlength;
if (required) {
var cardType = el.value;
var cardNumberDigit = $('#card_number').val().substring(0, 1);
switch (cardType) {
case 'master':
validationNumber = 5;
minlength = 16;
maxlength = 16;
error = 'Please enter a valid Master Card.';
break;
case 'visa':
validationNumber = 4;
minlength = 13;
maxlength = 16;
error = 'Please enter a valid Visa Card.';
break;
case 'amex':
validationNumber = 3;
minlength = 15;
maxlength = 15;
error = 'Please enter a valid Amex Card.';
break;
default:
validationNumber = 0;
minlength = 13;
maxlength = 16;
error = 'Please enter a valid Card Number.';
}
if (cardNumberDigit == validationNumber && ($('#card_number').val().length >= minlength && $('#card_number').val().length <= maxlength)) {
error = '';
console.log('done');
//$(parent).find('.custom-error').css('display', 'none');
//console.log(' validationNumber ' + validationNumber + ' error ' + error + ' cardNumberDigit ' + cardNumberDigit);
return true;
} else {
console.log('error');
//$(parent).find('.custom-error').text(error).css('display', 'block');
console.log($('#card_number').val().length);
console.log(' validationNumber ' + validationNumber + ' error ' + error + ' cardNumberDigit ' + cardNumberDigit);
return false;
}
}
});
}
}
}
});
它有一个错误，实际上没有正确验证，但我不确定可能出错的地方。任何帮助将不胜感激。