使用Javascript从用户输入的电话号码中提取子字符串答案

【问题标题】：Extract substring out of a user input phone number using Javascript使用Javascript从用户输入的电话号码中提取子字符串
【发布时间】：2012-04-21 07:26:39
【问题描述】：

我收到用户输入的电话号码 +XXX-X-XXX-XXXX （+XXX 作为国家代码），（X 作为城市代码），（XXX 作为第 3 位数字）和，（XXX 作为第 2 位 4位数）。我使用正则表达式来确认输入，如下代码所示；

function validate(form) {
    var phone = form.phone.value;
    var phoneRegex = /^(\+|00)\d{2,3}-\d{1,2}-\d{3}-\d{4}$/g;
    //Checking 'phone' and its regular expressions  
    if(phone == "") {
      inlineMsg('phone','<strong>Error</strong><br />You must enter phone number.',2);
    return false;
    }
    if(!phone.match(phoneRegex)) {
      inlineMsg('phone','<strong>Error</strong><br />Enter valid phone <br />+xxx-x-xxx-xxxx (or) <br />00xxx-x-xxx-xxxx.',2);
    return false;
    }
  return true;
}

它工作得很好，但问题是

编辑：如果用户输入为+XXXXXXXXXXX（全部一起）并按回车或转到另一个字段，则输入根据正则表达式自行设置，即+XXX-X-XXX- XXXX。

有人可以用一些例子指导我如何完成这项任务。谢谢

【问题讨论】：

我依稀记得有一个 jQuery 插件就是这样做的。不记得名字了，试着搜索一下。编辑：找到它：digitalbush.com/projects/masked-input-plugin
A comprehensive regex for phone number validation 的可能重复项（如果您不认为是这种情况，您应该澄清“我希望用户输入为 +XXXXXXXXXXXX（全部一起）然后 onblur ()，输入它根据正则表达式自行设置”；不幸的是，我们无法理解语法。）
@ninjagecko：这不是那个问题的重复。请在查找重复项之前阅读问题。
@Truth：这个问题难以理解。如果 OP 或有人很快澄清，我不希望投反对票或投票关闭，因为不清楚。如果您不同意并且可以理解该问题，请对其进行编辑以使其更清楚。
@Truth 这正是我所需要的，但不幸的是我是 JQuery 的新手。不知道具体怎么样。你有其他选择吗？

标签： javascript regex phone-number onblur

【解决方案1】：

设置元素的onblur方法回调如下：

var isValidPhoneNumber = function(string) {
    ...
}

var reformat = function(string) {
    /*
     *  > reformat('example 123 1 1 2 3 123-45')
     *  "+123-1-123-1234"
     */
    var numbers = string.match(/\d/g);
    return '+' + [
        numbers.slice(0,3).join(''),
        numbers.slice(3,4).join(''),
        numbers.slice(4,7).join(''),
        numbers.slice(7,11).join('')
    ].join('-');
}

var reformatPhoneNumber = function() {
    var inputElement = this;
    var value = inputElement.value;

    if (isValidPhoneNumber(value))
        inputElement.value = reformat(inputElement.value);
    else
        // complain to user
}

以下是设置 onblur 回调处理程序的两种示例方法：

document.getElementById('yourinputelement').onblur = reformatPhoneNumber;
<input ... onblur="reformatPhoneNumber"/>

如果您愿意，您可以使用更多验证码来扩充reformatPhoneNumber，或者只是在用户输入数字时不断验证该数字。

仅当您的电话号码为 +ABCDEFGHIJK 形式时才执行此操作，然后在 if 语句中添加 string.match(/^\+\d{11}$/)!==null。（^,$ 表示字符串的开头和结尾，\+ 表示加号，\d 表示数字 0-9，精确重复 {11} 次）。具体来说：

function isPlusAndEleventDigits(string) {
    /*
     *  Returns whether string is exactly of the form '+00000000000'
     *  where 0 means any digit 0-9
     */
    return string.match(/^\+\d{11}$/)!==null
}

【讨论】：

哇..它看起来很酷，让我检查一下，如果有任何问题会告诉你。

【解决方案2】：

尝试调整输入：
result = subject.replace(/^((\+|00)\d{2,3})-?(\d{1,2})-?(\d{3})-?(\d{4})$/mg, "$1-$3-$4-$5");

然后进行下一步。

【讨论】：

根据我的理解，你必须根据+XXX-XX-XXX-XXXX 调整输入字符串（即subject），通过根据result 替换subject，你得到你的字符串一个适当的结构。然后检查数据。
你的意思是我现在不用JQuery了？ “然后检查数据”是什么意思？