用于电话号码验证的综合正则表达式

https://stackoverflow.com/questions/123559

02-07-2019
|

题

我正在尝试编写一个全面的正则表达式来验证电话号码。理想情况下，它可以处理国际格式，但它必须处理美国格式，包括以下格式：

1-234-567-8901
1-234-567-8901 x1234
1-234-567-8901 分机 1234
1 (234) 567-8901
1.234.567.8901
1/234/567/8901
12345678901

我会用我当前的尝试来回答，但我希望有人有更好和/或更优雅的东西。

解决方案

更好的选择...只需删除输入中的所有非数字字符（“x”和前导“+”符号除外），请注意，因为英国人倾向于以非标准形式书写数字 +44 (0) ... 当要求使用国际前缀时（在这种特定情况下，您应该丢弃 (0) 完全）。

然后，您最终会得到如下值：

 12345678901
 12345678901x1234
 345678901x1234
 12344678901
 12345678901
 12345678901
 12345678901
 +4112345678
 +441234567890

然后，当您显示时，重新格式化为您喜欢的内容。例如

  1 (234) 567-8901
  1 (234) 567-8901 x1234

其他提示

事实证明，至少对于北美来说，有一个规范，称为纳米粒子.

您需要准确地指定您想要什么。什么是合法的分隔符？空格、破折号和句号？不允许使用分隔符吗？可以混合使用分隔符吗（例如，+0.111-222.3333）？如何处理分机号（例如 111-222-3333 x 44444）？特殊号码（例如 911）怎么样？区号是可选的还是必需的？

这是 7 或 10 位数字的正则表达式，允许扩展，分隔符是空格、破折号或句点：

^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

.*

如果用户想给你他的电话号码，那么相信他会做对的。如果他不想给你，那么强迫他输入一个有效的数字要么把他带到竞争对手的网站，要么让他输入一个适合你的正则表达式的随机字符串。我什至可能会想查找优质性爱热线的号码，然后输入该号码。

我还会将以下任何内容视为网站上的有效条目：

"123 456 7890 until 6pm, then 098 765 4321"  
"123 456 7890 or try my mobile on 098 765 4321"  
"ex-directory - mind your own business"

我还建议查看“库电话号码“谷歌图书馆。我知道它不是正则表达式，但它正是你想要的。

例如，它会识别出：

15555555555

是一个可能的数字，但不是有效的数字。它还支持美国以外的国家。

功能亮点：

解析/格式化/验证世界上所有国家/地区的电话号码。
getNumberType - 根据数字本身获取数字的类型；能够区分固定电话、移动电话、免费电话、保费费率、分摊费用、VoIP 和个人号码（只要可行）。
isNumberMatch - 获得两个数字是否相同的置信度。
getExampleNumber/getExampleNumberByType - 提供所有国家/地区的有效示例号码，并可选择指定所需的示例电话号码类型。
isPossibleNumber - 仅使用长度信息快速猜测一个号码是否是可能的电话号码，比完整验证快得多。
isValidNumber - 使用长度和前缀信息全面验证某个地区的电话号码。
AsYouTypeFormatter - 当用户输入每个数字时，即时格式化电话号码。
findNumbers - 查找文本输入中的数字。
PhoneNumberOfflineGeocoder - 提供与电话号码相关的地理信息。

例子

电话号码验证的最大问题是它非常依赖文化。

美国
- (408) 974–2042 是一个 有效的 美国号码
- (999) 974–2042 是 不是有效的 美国号码
澳大利亚
- 0404 999 999 是一个 有效的 澳大利亚号码
- (02) 9999 9999 也是一个 有效的 澳大利亚号码
- (09) 9999 9999 是 不是有效的 澳大利亚号码

正则表达式可以很好地检查电话号码的格式，但它并不能真正检查电话号码的格式。 有效性 一个电话号码。

我建议跳过简单的正则表达式来测试您的电话号码，并使用诸如 Google 之类的库 libphonenumber （链接到 GitHub 项目）.

引入 libphonenumber！

使用你的一个更复杂的例子， 1-234-567-8901 x1234, ，你得到以下数据出自 libphonenumber （链接到在线演示）:

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     true

Formatting Results:

E164 format                    +12345678901
Original format                (234) 567-8901 ext. 123
National format                (234) 567-8901 ext. 123
International format           +1 234-567-8901 ext. 123
Out-of-country format from US  1 (234) 567-8901 ext. 123
Out-of-country format from CH  00 1 234-567-8901 ext. 123

因此，您不仅可以了解电话号码是否有效（确实有效），还可以在您的区域设置中获得一致的电话号码格式。

作为奖励， libphonenumber 还有许多数据集来检查电话号码的有效性，因此检查诸如 +61299999999 （国际版 (02) 9999 9999) 返回一个有效的数字，格式如下：

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     true

Formatting Results

E164 format                    +61299999999
Original format                61 2 9999 9999
National format                (02) 9999 9999
International format           +61 2 9999 9999
Out-of-country format from US  011 61 2 9999 9999
Out-of-country format from CH  00 61 2 9999 9999

libphonenumber 还为您提供了许多额外的好处，例如获取检测到电话号码的位置，以及从电话号码获取时区信息：

PhoneNumberOfflineGeocoder Results
Location        Australia

PhoneNumberToTimeZonesMapper Results
Time zone(s)    [Australia/Sydney]

但无效的澳大利亚电话号码（(09) 9999 9999) 返回这不是有效的电话号码。

Validation Results

Result from isPossibleNumber()  true
Result from isValidNumber()     false

Google 的版本有 Java 和 Javascript 代码，但人们还实现了使用 Google i18n 电话号码数据集的其他语言的库：

PHP: https://github.com/giggsey/libphonenumber-for-php
Python: https://github.com/daviddrysdale/python-phonenumbers
红宝石: https://github.com/sstephenson/global_phone
C＃: https://github.com/twcclegg/libphonenumber-csharp
Objective-C: https://github.com/iziz/libPhoneNumber-iOS
JavaScript: https://github.com/ruimarinho/google-libphonenumber
灵丹妙药: https://github.com/social paymentsbv/ex_phone_number

除非您确定始终会接受来自一种区域设置的号码，并且它们始终采用一种格式，否则我强烈建议您不要为此编写自己的代码，并使用 libphonenumber 来验证和显示电话号码。

/^(?:(?:$?(?:00|\+)([1-4]\d\d|[1-9]\d?)$?)?[\-\.\ \\\/]?)?((?:$?\d{1,}$?[\-\.\ \\\/]?){0,})(?:[\-\.\ \\\/]?(?:#|ext\.?|extension|x)[\-\.\ \\\/]?(\d+))?$/i

这匹配：

 - (+351) 282 43 50 50
 - 90191919908
 - 555-8909
 - 001 6867684
 - 001 6867684x1
 - 1 (234) 567-8901
 - 1-234-567-8901 x1234
 - 1-234-567-8901 ext1234
 - 1-234 567.89/01 ext.1234
 - 1(234)5678901x1234
 - (123)8575973
 - (0055)(123)8575973

在 $n 上，它节省了：

国家指标
电话号码
扩大

你可以测试一下 https://www.regexpal.com/?fam=99127

尽管去除所有空格的答案很简洁，但它并没有真正解决所提出的问题，即找到正则表达式。以我的测试脚本为例，它下载网页并使用正则表达式提取所有电话号码。由于无论如何您都需要正则表达式，因此您不妨让正则表达式完成所有工作。我想出了这个：

1?\W*([2-9][0-8][0-9])\W*([2-9][0-9]{2})\W*([0-9]{4})(\se?x?t?(\d*))?

这是一个用于测试它的 perl 脚本。匹配时，$1 包含区号，$2 和 $3 包含电话号码，$5 包含分机号。我的测试脚本从互联网下载一个文件并打印其中的所有电话号码。

#!/usr/bin/perl

my $us_phone_regex =
        '1?\W*([2-9][0-8][0-9])\W*([2-9][0-9]{2})\W*([0-9]{4})(\se?x?t?(\d*))?';


my @tests =
(
"1-234-567-8901",
"1-234-567-8901 x1234",
"1-234-567-8901 ext1234",
"1 (234) 567-8901",
"1.234.567.8901",
"1/234/567/8901",
"12345678901",
"not a phone number"
);

foreach my $num (@tests)
{
        if( $num =~ m/$us_phone_regex/ )
        {
                print "match [$1-$2-$3]\n" if not defined $4;
                print "match [$1-$2-$3 $5]\n" if defined $4;
        }
        else
        {
                print "no match [$num]\n";
        }
}

#
# Extract all phone numbers from an arbitrary file.
#
my $external_filename =
        'http://web.textfiles.com/ezines/PHREAKSANDGEEKS/PnG-spring05.txt';
my @external_file = `curl $external_filename`;
foreach my $line (@external_file)
{
        if( $line =~ m/$us_phone_regex/ )
        {
                print "match $1 $2 $3\n";
        }
}

编辑：

您可以在正则表达式中将 \W* 更改为 \s*\W?\s* 以稍微收紧它。当我编写正则表达式时，我并没有考虑验证表单上的用户输入，但这一更改使得可以将正则表达式用于此目的。

'1?\s*\W?\s*([2-9][0-8][0-9])\s*\W?\s*([2-9][0-9]{2})\s*\W?\s*([0-9]{4})(\se?x?t?(\d*))?';

我在另一个 SO 问题上回答了这个问题，然后决定将我的答案也作为该线程的答案，因为没有人解决如何需要/不需要项目，只是分发正则表达式：正则表达式工作错误，匹配意外的事情

从我在该网站上的帖子中，我创建了一个快速指南，以帮助任何人为自己想要的电话号码格式制作自己的正则表达式，我会警告（就像我在其他网站上所做的那样），如果您限制太多，您可能无法获得所需的结果，并且没有“一刀切”的解决方案来接受世界上所有可能的电话号码 - 只有您决定接受的格式。使用风险自负。

快速备忘单

开始表达式： /^
如果您想需要空间，请使用： [\s] 或者 \s
如果您想需要括号，请使用： [(] 和 [)] 。使用 $ 和 $ 很丑陋并且会让事情变得混乱。
如果您希望任何内容是可选的，请添加 ? 在它之后
如果您想要连字符，只需输入 - 或者 [-] 。但是，如果您没有将其放在一系列其他字符中的第一个或最后一个字符中，则可能需要对其进行转义： \-
如果您想在插槽中接受不同的选择，请将选项括在括号中： [-.\s] 需要连字符、句点或空格。最后一个括号后面的问号将使所有这些对于该插槽都是可选的。
\d{3} ：需要 3 位数字：000-999。简写为[0-9][0-9][0-9].
[2-9] ：该插槽需要数字 2-9。
(\+|1\s)? ：接受“加号”或 1 和空格（管道字符， |, ，是“或”），并将其设为可选。“加号”必须转义。
如果您希望特定数字与插槽匹配，请输入它们： [246] 将需要 2、4 或 6。 [77|78] 将需要 77 或 78。
$/ ：结束表达式

我写得最简单（尽管我不需要其中的点）。

^([0-9\(\)\/\+ \-]*)$

如下所述，它仅检查字符，而不检查其结构/顺序

注意剥离 () 字符不适用于常见的英国数字书写风格： +44 (0) 1234 567890 这意味着拨打国际号码：
+441234567890
或在英国拨打 01234567890

如果您只是想验证现场没有随机垃圾（即来自表单垃圾邮件发送者），则此正则表达式应该很好：

^[0-9+\(\)#\.\s\/ext-]+$

请注意，它对于多少位数字或这些数字中哪些数字有效没有任何特殊规则，它只是验证是否只有数字、括号、破折号、加号、空格、井号、星号、句点、逗号或字母 e, x, t 存在。

它应该与国际号码和本地化格式兼容。您预计某些区域是否需要允许使用方括号、大括号或尖括号？（目前不包括在内）。

如果您想维护每位数字规则（例如美国的区号和前缀（交换代码）必须在 200-999 的范围内），那么祝您好运。维护一套复杂的规则集，而世界上任何国家在未来的任何时候都可能会过时，这听起来并不有趣。

虽然剥离所有/大多数非数字字符可能在服务器端效果很好（特别是如果您计划将这些值传递给拨号器），但您可能不希望在验证期间破坏用户的输入，特别是如果您希望它们在另一个字段中进行更正。

你有没有看过正则表达式库?

输入美国电话号码会带来一系列可能性。

我尝试使用无限制的正则表达式：

/^[+#*\(\)\[\]]*([0-9][ ext+-pw#*\(\)\[\]]*){6,45}$/

接受：

+(01) 123 (456) 789 ext555
123456
*44 123-456-789 [321]
123456
123456789012345678901234567890123456789012345
*****++[](][((( 123456tteexxttppww

拒绝：

mob 07777 777777
1234 567 890 after 5pm
john smith
(empty)
1234567890123456789012345678901234567890123456
911

您可以自行决定是否对其进行消毒以供展示。验证后可以虽然是一个数字。

我发现这个效果很好：

^\(*\+*[1-9]{0,3}\)*-*[1-9]{0,3}[-. /]*\(*[2-9]\d{2}\)*[-. /]*\d{3}[-. /]*\d{4} *e*x*t*\.* *\d{0,4}$

它适用于以下数字格式：

1-234-567-8901
1-234-567-8901 x1234
1-234-567-8901 ext1234
1 (234) 567-8901
1.234.567.8901
1/234/567/8901
12345678901
1-234-567-8901 ext. 1234
(+351) 282 433 5050

确保使用全局和多行标志来确保。

关联： http://www.regexr.com/3bp4b

如果您谈论的是表单验证，由于不同的国家和提供商标准，用于验证正确含义和正确数据的正则表达式将非常复杂。跟上时代的步伐也很困难。

我将这个问题解释为寻找一个广泛有效的模式，该模式可能在内部不一致 - 例如具有一组有效的数字，但不验证干线、交换等。国家/地区代码前缀的有效模式。

北美很简单，对于国际来说，我更喜欢使用“惯用”模式，其中涵盖了人们指定和记住数字的方式：

^((((\(\d{3}\))|(\d{3}-))\d{3}-\d{4})|(\+?\d{2}((-| )\d{1,8}){1,5}))(( x| ext)\d{1,5}){0,1}$

北美模式确保如果包含一个括号，则两个括号都会包含在内。国际帐户包含可选的首字母“+”和国家/地区代码。在那之后，你就进入了这个习语。有效的匹配将是：

(xxx)xxx-xxxx
(xxx)-xxx-xxxx
(xxx)xxx-xxxx x123
12 1234 123 1 x1111
12 12 12 12 12
12 1 1234 123456 x12345
+12 1234 1234
+12 12 12 1234
+12 1234 5678
+12 12345678

这可能有偏见，因为我的经验仅限于北美、欧洲和一小部分亚洲。

对这个话题的大量回复强化了我的直觉——这个问题实际上有无数种解决方案，但没有一个是优雅的。

老实说，我建议您不要尝试验证电话号码。即使您可以编写一个允许所有不同合法格式的大型验证器，它最终也会允许几乎任何东西，甚至是远程类似于电话号码的东西。

在我看来，最优雅的解决方案是验证最小长度，仅此而已。

这是菲律宾手机号码的简单正则表达式模式：

((\+[0-9]{2})|0)[.\- ]?9[0-9]{2}[.\- ]?[0-9]{3}[.\- ]?[0-9]{4}

或者

((\+63)|0)[.\- ]?9[0-9]{2}[.\- ]?[0-9]{3}[.\- ]?[0-9]{4}

将匹配这些：

+63.917.123.4567  
+63-917-123-4567  
+63 917 123 4567  
+639171234567  
09171234567

第一个将匹配任何两位数的国家/地区代码，而第二个将仅匹配菲律宾国家/地区代码。

在这里测试一下： http://refiddle.com/1ox

您将很难使用单个/简单的正则表达式来处理国际号码，请参阅这个帖子关于国际（甚至北美）电话号码的困难。

您需要解析前几位数字以确定国家/地区代码是什么，然后根据国家/地区采取不同的操作。

除此之外 - 您给出的列表不包括另一种常见的美国格式 - 省略了最初的 1。美国的大多数手机都不需要它，而且它会开始让年轻一代感到困惑，除非他们拨打过国际电话。

你已经正确地认识到这是一个棘手的问题......

-亚当

这是一个与我需要实现的验证最匹配的精彩模式。我不是原作者，但我认为它非常值得分享，因为我发现这个问题非常复杂，并且没有简洁或广泛有用的答案。

以下正则表达式将捕获各种全球电话号码格式中广泛使用的数字和字符组合：

/^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/gm

积极的：
+42 555.123.4567
+1-(800)-123-4567
+7 555 1234567
+7(926)1234567
(926) 1234567
+79261234567
926 1234567
9261234567
1234567
123-4567
123-89-01
495 1234567
469 123 45 67
89261234567
8 (926) 1234567
926.123.4567
415-555-1234
650-555-2345
(416)555-3456
202 555 4567
4035555678
1 416 555 9292

消极的：
926 3 4
8 800 600-苹果

原始来源： http://www.regexr.com/38pvb

这是迄今为止我最好的尝试。它处理上面的格式，但我确信我缺少一些其他可能的格式。

^\d?(?:(?:[\+]?(?:[\d]{1,3}(?:[ ]+|[\-.])))?[(]?(?:[\d]{3})[\-/)]?(?:[ ]+)?)?(?:[a-zA-Z2-9][a-zA-Z0-9 \-.]{6,})(?:(?:[ ]+|[xX]|(i:ext[\.]?)){1,2}(?:[\d]{1,5}))?$

阅读完这些答案后，似乎没有一个简单的正则表达式可以解析一堆文本并提取任何格式的电话号码（包括带有和不带有加号的国际电话号码）。

这是我最近在客户项目中使用的内容，我们必须将任何格式的所有电话号码转换为电话：链接。

到目前为止，它一直在处理他们提出的所有问题，但如果出现错误，我会更新这个答案。

正则表达式：

/(\+*\d{1,})*([ |\(])*(\d{3})[^\d]*(\d{3})[^\d]*(\d{4})/

PHP 函数用 tel 替换所有电话号码：链接（如果有人好奇的话）：

function phoneToTel($number) {
    $return = preg_replace('/(\+*\d{1,})*([ |\(])*(\d{3})[^\d]*(\d{3})[^\d]*(\d{4})/', '<a href="tel:$1$3$4$5">$1 ($3) $4-$5</a>', $number); // includes international
    return $return;
}

我相信号码::电话::美国和正则表达式::常见（特别是来源正则表达式::通用::URI::RFC2806) Perl 模块可以提供帮助。

这个问题可能应该更详细地说明，以解释验证数字的目的。例如，911 在美国是有效号码，但 911x 不适用于任何 x 值。这样电话公司就可以计算您何时完成拨号。这个问题有几种变体。但是您的正则表达式不会检查区号部分，因此这似乎不是一个问题。

就像验证电子邮件地址一样，即使您有有效的结果，在您尝试之前也无法知道它是否已分配给某人。

如果您正在尝试验证用户输入，为什么不标准化结果并完成它呢？如果用户输入的数字您无法识别为有效数字，请将其保存为输入或删除不可使用的字符。这号码::电话::标准化 Perl 模块可能是灵感的来源。

我在一家市场研究公司工作，我们必须一直过滤这些类型的输入。你把事情搞得太复杂了。只需删除非字母数字字符，然后查看是否有扩展名。

为了进一步分析，您可以订阅众多提供商之一，这些提供商将允许您访问有效号码的数据库，并告诉您它们是固定电话还是手机、是否已断开连接等。这是要花钱的。

替换格式字符，然后检查其余字符的电话有效性。在 PHP 中，

 $replace = array( ' ', '-', '/', '(', ')', ',', '.' ); //etc; as needed
 preg_match( '/1?[0-9]{10}((ext|x)[0-9]{1,4})?/i', str_replace( $replace, '', $phone_num );

破坏像这样的复杂正则表达式同样有效，但更简单。

我发现这很有趣。我还没有测试过，但看起来好像可以工作

<?php
/*
string validate_telephone_number (string $number, array $formats)
*/

function validate_telephone_number($number, $formats)
{
$format = trim(ereg_replace("[0-9]", "#", $number));

return (in_array($format, $formats)) ? true : false;
}

/* Usage Examples */

// List of possible formats: You can add new formats or modify the existing ones

$formats = array('###-###-####', '####-###-###',
                 '(###) ###-###', '####-####-####',
                 '##-###-####-####', '####-####', '###-###-###',
                 '#####-###-###', '##########');

$number = '08008-555-555';

if(validate_telephone_number($number, $formats))
{
echo $number.' is a valid phone number.';
}

echo "<br />";

$number = '123-555-555';

if(validate_telephone_number($number, $formats))
{
echo $number.' is a valid phone number.';
}

echo "<br />";

$number = '1800-1234-5678';

if(validate_telephone_number($number, $formats))
{
echo $number.' is a valid phone number.';
}

echo "<br />";

$number = '(800) 555-123';

if(validate_telephone_number($number, $formats))
{
echo $number.' is a valid phone number.';
}

echo "<br />";

$number = '1234567890';

if(validate_telephone_number($number, $formats))
{
echo $number.' is a valid phone number.';
}
?>

为此，您可能最好使用屏蔽输入。这样用户只能输入数字，而您可以按照您认为合适的方式设置格式。我不确定这是否适用于 Web 应用程序，但如果是的话，有一个非常点击的 jQuery 插件，它提供了一些执行此操作的选项。

http://digitalbush.com/projects/masked-input-plugin/

他们甚至在教程中介绍了如何屏蔽电话号码输入。

这是在 JavaScript 中运行良好的一个。它位于字符串中，因为这是 Dojo 小部件所期望的。

它与带有可选扩展名的 10 位北美 NANP 号码匹配。空格、破折号和句点都是可接受的分隔符。

"^(\\(?\\d\\d\\d\\)?)( |-|\\.)?\\d\\d\\d( |-|\\.)?\\d{4,4}(( |-|\\.)?[ext\\.]+ ?\\d+)?$"

我一直在努力解决同样的问题，试图让我的应用程序面向未来，但这些人让我朝着正确的方向前进。我实际上并没有检查号码本身以查看它是否有效，我只是想确保输入的一系列号码可能有或可能没有扩展名。

最坏的情况是，如果用户必须从 XML 文件中提取未格式化的号码，他们仍然只需将号码输入到手机的数字键盘中 012345678x5, ，没有真正的理由保持它漂亮。这种正则表达式对我来说会是这样的：

\d+ ?\w{0,9} ?\d+

01234467 extension 123456
01234567x123456
01234567890

我倾向于同意剥离非数字并只接受现有的内容是最好的。也许是为了确保至少存在几个数字，尽管这确实禁止诸如字母电话号码“ASK-JAKE”之类的内容。

几个简单的 Perl 表达式可能是：

@f = /(\d+)/g;
tr/0-9//dc;

使用第一个将数字组保持在一起，这可能会提供格式线索。使用第二个可以轻松地抛出所有非数字。

是否担心可能需要暂停然后输入更多按键？或者类似 555-1212（等待蜂鸣声）123？

    pattern="^[\d|\+|\(]+[\)|\d|\s|-]*[\d]$" 
    validateat="onsubmit"

必须以数字结尾，可以以 ( 或 + 或数字开头，并且可以包含 + - ( 或 )

对于任何有兴趣对爱尔兰手机号码执行类似操作的人，这里有一个简单的方法来完成它：

http://ilovenicii.com/?p=87

PHP

<?php
$pattern = "/^(083|086|085|086|087)\d{7}$/";
$phone = "087343266";

if (preg_match($pattern,$phone)) echo "Match";
else echo "Not match";

该链接上还有一个 JQuery 解决方案。

编辑：

jQuery 解决方案：

    $(function(){
    //original field values
    var field_values = {
            //id        :  value
            'url'       : 'url',
            'yourname'  : 'yourname',
            'email'     : 'email',
            'phone'     : 'phone'
    };

        var url =$("input#url").val();
        var yourname =$("input#yourname").val();
        var email =$("input#email").val();
        var phone =$("input#phone").val();


    //inputfocus
    $('input#url').inputfocus({ value: field_values['url'] });
    $('input#yourname').inputfocus({ value: field_values['yourname'] });
    $('input#email').inputfocus({ value: field_values['email'] }); 
    $('input#phone').inputfocus({ value: field_values['phone'] });



    //reset progress bar
    $('#progress').css('width','0');
    $('#progress_text').html('0% Complete');

    //first_step
    $('form').submit(function(){ return false; });
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        //ckeck if inputs aren't empty
        var fields = $('#first_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<12 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }
        });        

        if(!error) {
            if( $('#password').val() != $('#cpassword').val() ) {
                    $('#first_step input[type=password]').each(function(){
                        $(this).removeClass('valid').addClass('error');
                        $(this).effect("shake", { times:3 }, 50);
                    });

                    return false;
            } else {   
                //update progress bar
                $('#progress_text').html('33% Complete');
                $('#progress').css('width','113px');

                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();     
            }               
        } else return false;
    });

    //second section
    $('#submit_second').click(function(){
        //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields = $('#second_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                $(this).addClass('valid');
            }


        function validatePhone(phone) {
        var a = document.getElementById(phone).value;
        var filter = /^[0-9-+]+$/;
            if (filter.test(a)) {
                return true;
            }
            else {
                return false;
            }
        }

        $('#phone').blur(function(e) {
            if (validatePhone('txtPhone')) {
                $('#spnPhoneStatus').html('Valid');
                $('#spnPhoneStatus').css('color', 'green');
            }
            else {
                $('#spnPhoneStatus').html('Invalid');
            $('#spnPhoneStatus').css('color', 'red');
            }
        });

     });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Complete');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#fourth_step').slideDown();     
        } else return false;

    });


    $('#submit_second').click(function(){
        //update progress bar
        $('#progress_text').html('100% Complete');
        $('#progress').css('width','339px');

        //prepare the fourth step
        var fields = new Array(
            $('#url').val(),
            $('#yourname').val(),
            $('#email').val(),
            $('#phone').val()

        );
        var tr = $('#fourth_step tr');
        tr.each(function(){
            //alert( fields[$(this).index()] )
            $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
        });

        //slide steps
        $('#third_step').slideUp();
        $('#fourth_step').slideDown();            
    });


    $('#submit_fourth').click(function(){

        url =$("input#url").val();
        yourname =$("input#yourname").val();
        email =$("input#email").val();
        phone =$("input#phone").val();

        //send information to server
        var dataString = 'url='+ url + '&yourname=' + yourname + '&email=' + email + '&phone=' + phone;  



        alert (dataString);//return false;  
            $.ajax({  
                type: "POST",  
                url: "http://clients.socialnetworkingsolutions.com/infobox/contact/",  
                data: "url="+url+"&yourname="+yourname+"&email="+email+'&phone=' + phone,
                cache: false,
                success: function(data) {  
                    console.log("form submitted");
                    alert("success");
                }
                });  
        return false;

   });


    //back button
    $('.back').click(function(){
        var container = $(this).parent('div'),
        previous  = container.prev();

        switch(previous.attr('id')) {
            case 'first_step' : $('#progress_text').html('0% Complete');
                  $('#progress').css('width','0px');
                       break;
            case 'second_step': $('#progress_text').html('33% Complete');
                  $('#progress').css('width','113px');
                       break;

            case 'third_step' : $('#progress_text').html('66% Complete');
                  $('#progress').css('width','226px');
                       break;

        default: break;
    }

    $(container).slideUp();
    $(previous).slideDown();
});


});

来源.

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow