使用Javascript将一个文本字段拆分为两个，对其进行验证，然后重新合并

一位客户要求将包含电话号码数据的文本字段分为两部分——一部分用于国家代码，另一部分用于电话号码的其余部分

唉，这个字段被硬编码到系统中，到目前为止收集的所有数据都作为一个合并字段（因此保存为数据库中的一列）

因此，我认为最好的答案可能是：

使用Javascript，将单个文本字段替换为两个文本字段

当用户单击submit按钮时，这些内容将合并回原始文本字段

当从数据库中读取该字段时（即管理员查看该条目时），如果有办法将该字段重新分隔为两个，则会获得额外的分数。请注意，数据格式必须一致——我不想将现有的字符串数据与一堆JSON字符串混合

这是最好的方法吗？这种方法是否存在任何可预见的问题（除了用户没有启用JavaScript之外）？有没有一个jQuery插件专门设计来做这样的事情

---

我还需要在某个时候验证它是否是有效的电话号码，但我自己可以解决这个问题。

您可以使用屏蔽输入JQuery插件，而不是将文本字段一分为二

示例JS：

编辑：

---

对于第3点：如果您真的想将数字拆分为两个并显示它，您可以从右边（通常是7位数字）而不是从左边拆分它，这样即使国家代码是否存在，您也可以得到正确的拆分。

您可以使用屏蔽输入JQuery插件，而不是将文本字段拆分为两个

示例JS：

编辑：

---

对于第三点：如果你真的想把数字分成两部分并显示出来，你可以从右边（通常是7位数字）而不是从左边把它分开，这样即使有没有国家代码，你也可以得到正确的分开。

如果你不想使用插件，你可以随时查看我在上面写的这个代码片段

如果您想确保它在JS中工作，只需将display:'none'更改为display:'block'

这是我的JavaScript

$(function() {
    $('#phone').css({ display:'none' });
    $('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
    bindChange();
});

function bindChange() {
    $('#phone').val('('+$('#phoneAreaCode').val()+') ');
    $('#phoneMainNumber, #phoneAreaCode').keyup(function() {
       $('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());    
    });   
}

$（函数（）{
$（'#phone'）.css（{display:'none'}）；
$（“#phone”）。在（“）”之后。在（“（”）之后；
bindChange（）；
});
函数bindChange（）{
$（'phone'）.val（'（+$（'phoneAreaCode'）.val（）+'）；
$（'#phoneMainNumber，#phoneAreaCode'）.keyup（函数（）{
$（'#phone'）.val（'（'+$（'#phoneAreaCode'）.val（）+'）'+$（'#phoneMainNumber'）.val（））；
});   
}

如果你不想使用插件，你可以随时查看我制作的这段代码

如果您想确保它在JS中工作，只需将display:'none'更改为display:'block'

这是我的JavaScript

$(function() {
    $('#phone').css({ display:'none' });
    $('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
    bindChange();
});

function bindChange() {
    $('#phone').val('('+$('#phoneAreaCode').val()+') ');
    $('#phoneMainNumber, #phoneAreaCode').keyup(function() {
       $('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());    
    });   
}

$（函数（）{
$（'#phone'）.css（{display:'none'}）；
$（“#phone”）。在（“）”之后。在（“（”）之后；
bindChange（）；
});
函数bindChange（）{
$（'phone'）.val（'（+$（'phoneAreaCode'）.val（）+'）；
$（'#phoneMainNumber，#phoneAreaCode'）.keyup（函数（）{
$（'#phone'）.val（'（'+$（'#phoneAreaCode'）.val（）+'）'+$（'#phoneMainNumber'）.val（））；
});   
}

数据库中的所有数字都有国家代码吗？还是仅仅是向前走？@RemarkLima他们已经开始了。我认为客户只是想把它作为一种审美的东西，以确保人们输入正确的国家代码和你想要的东西。@JayBlanchard nothing nothing这就是为什么我要提供广告，并询问是否有国家代码，例如jqueryplugin-orifia mover-or-thinking initiamnotasking或fully-codedsolution here.com，然后，如果每个条目都有国家代码，它们都是标准的吗？它们都是+44/+1/+64还是一些0044/001/0064？他们后面都有空位吗？如果他们确实有一个空格，那么根据空格的第一个索引提取国家代码将是一件小事。。。但这实际上取决于数据的质量。@RemarkLima表单前会有一个“+”，因此第一个框中只有国家和地区代码，第二个框中只有数字的剩余部分。但是，要获得一致的数据是很困难的。数据库中的所有数字都有国家代码吗？还是仅仅是向前走？@RemarkLima他们已经开始了。我认为客户只是想把它作为一种审美的东西，以确保人们输入正确的国家代码和你想要的东西。@JayBlanchard nothing nothing这就是为什么我要提供广告，并询问是否有国家代码，例如jqueryplugin-orifia mover-or-thinking initiamnotasking或fully-codedsolution here.com，然后，如果每个条目都有国家代码，它们都是标准的吗？它们都是+44/+1/+64还是一些0044/001/0064？他们后面都有空位吗？如果他们确实有一个空格，那么根据空格的第一个索引提取国家代码将是一件小事。。。但这实际上取决于数据的质量。@RemarkLima表单前会有一个“+”，因此第一个框中只有国家和地区代码，第二个框中只有数字的剩余部分。但是，是的，这是一件很难获得一致数据的事情。我不确定它是否回答了这个问题，但这是一个非常好的插件。我不确定它是否回答了这个问题，但这是一个非常好的插件。这与我的想法非常接近。考虑到国际电话号码的长度不尽相同，我认为从数据库中将其恢复为这种格式并不容易，但更重要的是，它在最终用户端而不是在管理员端保持一致。谢谢好的，你能给我举个你期望得到的数字的例子吗。我应该帮我更好地为你编写这个脚本。这是国际电话号码，所以从+44（0）nnnnnnnnnnnnnnnnn到+1（403）nnnnnnnnnnn（第一个数字是零，如果是国际电话，则删除；第二个数字是403位，如果是国际电话，则保留。为什么？因为电话号码很愚蠢。）。实际上，第一个框将包含

+nn（nnn）

部分（带有+