格式化银行账户输入仅用于显示答案

【问题标题】：Formating bank account input only for display格式化银行账户输入仅用于显示
【发布时间】：2017-10-10 15:18:52
【问题描述】：

我需要为银行编号格式化文本输入，以便数字看起来像这样：

11 2490 1111 0000 0000 2222 3333

问题是我只想为用户显示这个格式化（带空格）但没有它（11249011110000000022223333）将它发送到服务器。我怎样才能做到这一点？

编辑

这是我使用 formatter.js 库 (http://firstopinion.github.io/formatter.js/index.html) 编写的：

<script>
$(document).ready(function () {
        var formatted = new Formatter(document.getElementById('bank_account-0'), {
        'pattern': '{{99}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}}',
        'persistent': false
    });
});
</script>

【问题讨论】：

到目前为止你尝试过什么？要求人们为你做你的工作并不好......
.replace(/\s+/g, '')?仍然想知道为什么服务器不能这样做。
@evolutionxbox 我尝试以这种方式使用 formatter.js 库：
您可以编辑您的问题并展示您的努力吗？
请不要假设我请别人为我做我的工作:)。我已经在很多方面尝试了 formatter.js。我不需要任何人为我编写代码，我只是在寻找可能解决方案的示例。也许任何其他库会更合适，或者我可以将正则表达式与某些东西结合使用，等等......

标签： javascript regex validation input format

【解决方案1】：

最后我决定改用简单的 PHP 过滤器：

$element->addFilter('PregReplace', array( 'match' => '/\s/', 'replace' => '' ));

这与前端的 cleave.js 库配合得很好，满足我的要求。

【讨论】：

【解决方案2】：

您可以使用bankAccount.value.replace(/ /g, '')。

代码示例：

var bankAccount = document.getElementById('bank_account-0'),
    getNumber = document.getElementById('get_number');

new Formatter(bankAccount, {
  'pattern': '{{99}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}}',
  'persistent': false
});

getNumber.onclick = function() {
  var num = bankAccount.value.replace(/ /g, '');
  console.log(num);
}

.input { width: 240px}

<script src="//firstopinion.github.io/formatter.js/javascripts/formatter.js"></script>

<input type="text" class="input" id="bank_account-0" maxlength="26" pattern="\d*">
<button id="get_number">Get number</button>

【讨论】：

这对我来说似乎是一个很好的解决方案，但是我只设法在控制台中显示了值（就像上面的你一样）。该值不会更改 HTML 属性中的实际值，并以未更改的版本将其发送到服务器。我猜这是因为我使用的格式化库可能有一个 eventListener 来替换它。无论如何，我现在从 formatter.js 切换到 cleave.js 但这里没有区别。
好吧，最后我决定改用简单的 PHP 过滤器 ;) $element->addFilter('PregReplace', array( 'match' => '/\s/', 'replace' => '' ));这可以很好地与前端的 cleave.js 库配合使用并满足我的要求。

【解决方案3】：

您可以考虑在每次输入未聚焦或粘贴值时更改值：

var a = document.getElementById('yourInputId');
a.onblur = function() { this.value = this.value.replace(/ /g, ''); };

提示：您可能会考虑在服务器端切割空格。这可能是服务器端验证的一部分。

【讨论】：

不错的解决方案，为我提供了额外的功能，谢谢！ :) 但是，当用户返回编辑输入文本时，我还需要 a.onfocus 的一些事件。简单地恢复这个 onblur 函数在这里不起作用。
好吧，最后我决定改用简单的 PHP 过滤器 ;) $element->addFilter('PregReplace', array( 'match' => '/\s/', 'replace' => '' ));这可以很好地与前端的 cleave.js 库配合使用并满足我的要求。