信用卡验证 - 带有空格的匹配模式

Posted 2023-05-09

【中文标题】信用卡验证 - 带有空格的匹配模式

【英文标题】：Credit Card Validation - match pattern with white spaces

【发布时间】：2020-10-18 12:04:40

【问题描述】：

我正在构建一个信用卡表单，我想通过匹配我动态添加到输入的相应卡片模式来使用 checkValidity 验证卡。

假设用户输入一个万事达卡，比如 - 5454545454545454 ，它在格式化和添加空格后看起来像 5454 5454 5454 5454 。然后我将该字段的模式属性动态更改为万事达卡的正则表达式 - ^(?:5[1-5][0-9]14)$，在输入模糊时我触发 checkValidity，它在不应该返回 false 时返回。

我猜这是由于我所做的格式化，因为它在值中添加了空格并且模式失败了。

所以我的问题是我无法获得一个解决方案来验证给定正则表达式的空格模式，或者在使用 checkValidity 验证模式时如何删除空格，或者我应该如何向给定的正则表达式或其他什么添加空格这种情况有解决办法吗？

【参考方案1】：

您可以使用 jQuery 轻松完成这一任务。我了解您动态加载 CC 编号或从用户输入中获取 CC 编号，然后您在输入后在某处验证它并添加空格。

您可以使用.replace() JS 函数来删除 CC 号码中的所有空格并将该号码发送以进行验证，这样就可以正常工作了。

您可以阅读更多关于 .replace() here 的详细信息。

我在下面为您创建了一个简单的示例。运行 sn-p 以查看它是否正常工作。

//Dynamicall add number for example only
var ccNumber = '1234567890123456';
var addSpaces = ccNumber.match(/.1,4/g);
$('#credit-card').val(addSpaces.join(' '));

//Getting card number and removing white spaces
var getCardNumber = $('#credit-card').val()
var NoSpacesCCNumber = getCardNumber.replace(/\s+/g, '')
console.log('No spaces for validation = ' + NoSpacesCCNumber)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="label" for="credit-card">Credit card</label>
<input id="credit-card" value="" autocomplete="off" type="text" />

【讨论】：

我想要的是在执行 checkValidity 时我想要一个正则表达式模式，它会忽略空格并允许它匹配其他在 checkValidity 之前执行的操作以将输入值设置为没有空格

@TapanDave 您能否通过添加一些可重现的代码（包括您的函数 checkValidity）来更新问题。请添加所有相关代码，以便我可以进一步帮助它变得容易。谢谢。