使用 JQuery 和 PHP 进行电话字段验证

Question

我有一个带有简单 jQuery 验证的联系表单，并使用 Php 发送表单内容。 我正在尝试包括电话字段验证。 JavaScript 在验证电话字段和自动格式化/更正/完成电话字段时工作正常。 但是 PHP 脚本不起作用。 如果我删除 phoneNumber 字段，它工作正常。

 (function($) { "use strict"; /* Alert Boxes * ------------------------------------------------------ */ var clAlertBoxes = function() { $('.alert-box').on('click', '.alert-box__close', function() { $(this).parent().fadeOut(500); }); }; /* Contact Form * ------------------------------------------------------ */ var clContactForm = function() { /* local validation */ $('#contactForm').validate({ /* submit via ajax */ submitHandler: function(form) { var sLoader = $('.submit-loader'); $.ajax({ type: "POST", url: "inc/sendEmail.php", data: $(form).serialize(), beforeSend: function() { sLoader.slideDown("slow"); }, success: function(msg) { // Message was sent if (msg == 'OK') { sLoader.slideUp("slow"); $('.message-warning').fadeOut(); $('#contactForm').fadeOut(); $('.message-success').fadeIn(); } // There was an error else { sLoader.slideUp("slow"); $('.message-warning').html(msg); $('.message-warning').slideDown("slow"); } }, error: function() { sLoader.slideUp("slow"); $('.message-warning').html("Something went wrong! Please try again."); $('.message-warning').slideDown("slow"); } }); } }); }; })(jQuery);

 fieldset { margin: 0; padding: 0; } .message-warning, .message-success { display: none; background: #111111; font-size: 1.5rem; line-height: 2; padding: 3rem; margin-bottom: 3.6rem; width: 100%; } .message-warning { color: #ff6163; } .message-success { color: #39b54a; } .message-warning i, .message-success i { margin-right: 10px; font-size: 1.2rem; } /* form loader * ----------------------------------------------- */ .submit-loader { display: none; position: relative; left: 0; top: 1.8rem; width: 100%; text-align: center; margin-bottom: 3rem; } .submit-loader .text-loader { display: none; font-family: "montserrat-regular", sans-serif; font-size: 1.3rem; font-weight: bold; line-height: 1.846; color: #666666; letter-spacing: .2rem; text-transform: uppercase; } .oldie .submit-loader .s-loader { display: none; } .oldie .submit-loader .text-loader { display: block; } /* --------------------------------------------------------------- * ## loader animation * --------------------------------------------------------------- */ .s-loader { margin: 1.2rem auto 3rem; width: 70px; text-align: center; -webkit-transform: translateX(0.45rem); -ms-transform: translateX(0.45rem); transform: translateX(0.45rem); } .s-loader > div { width: 9px; height: 9px; background-color: #FFFFFF; border-radius: 100%; display: inline-block; margin-right: .9rem; -webkit-animation: bouncedelay 1.4s infinite ease-in-out both; animation: bouncedelay 1.4s infinite ease-in-out both; } .s-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .s-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }

 <?php <?php // Replace this with your own email address $siteOwnersEmail = 'testemail@outlook.com'; if($_POST) { $name = trim(stripslashes($_POST['contactName'])); $email = trim(stripslashes($_POST['contactEmail'])); $phone = stripslashes($_POST['phoneNumber']); $subject = trim(stripslashes($_POST['contactSubject'])); $contact_message = trim(stripslashes($_POST['contactMessage'])); // Check Name if (strlen($name) < 2) { $error['name'] = "Please enter your name."; } // Check Email if (!preg_match('/^[a-z0-9&\\'\\.\\-_\\+]+@[a-z0-9\\-]+\\.([a-z0-9\\-]+\\.)*+[az]{2}/is', $email)) { $error['email'] = "Please enter a valid email address."; } // Check Phone if(!preg_match("/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/", $phone)) { $error['phone'] = "Please enter a valid phone number."; } // Check Message if (strlen($contact_message) < 15) { $error['message'] = "Please enter your message. It should have at least 15 characters."; } // Subject if ($subject == '') { $subject = "Contact Form Submission"; } // Set Message $message .= "Email from: " . $name . "<br />"; $message .= "Email address: " . $email . "<br />"; $message .= "Contact Phone: " . $phone . "<br />"; $message .= "Message: <br />"; $message .= $contact_message; $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />"; // Set From: header $from = $name . " <" . $email . ">"; // Email Headers $headers = "From: " . $from . "\\r\\n"; $headers .= "Reply-To: ". $email . "\\r\\n"; $headers .= "MIME-Version: 1.0\\r\\n"; $headers .= "Content-Type: text/html; charset=ISO-8859-1\\r\\n"; if (!$error) { ini_set("sendmail_from", $siteOwnersEmail); // for windows server $mail = mail($siteOwnersEmail, $subject, $message, $headers); if ($mail) { echo "OK"; } else { echo "Something went wrong... Please try again."; } } # end if - no validation error else { $response = (isset($error['name'])) ? $error['name'] . "<br /> \\n" : null; $response .= (isset($error['email'])) ? $error['email'] . "<br /> \\n" : null; $response .= (isset($error['phone'])) ? $error['phone'] . "<br /> \\n" : null; $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null; echo $response; } # end if - there was a validation error } ?> ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script> <div class="default-form contact-form"> <form method="post" action="" id="contactForm" novalidate="novalidate"> <fieldset> <div class="form-group"> <input type="text" name="contactName" id="contactName" value="" placeholder="Complete Name" minlength="4" required="" aria-required="true"> </div> <div class="form-group"> <input type="email" name="contactEmail" id="contactEmail" value="" placeholder="Your Email" required="" aria-required="true"> </div> <div class="form-group"> <input placeholder="Phone" type="text" id="phoneNumber" name="phoneNumber" required="" aria-required="true"> <script type="text/javascript"> $('#phoneNumber').inputmask("(999) 999-9999"); </script> </div> <div class="form-group"> <input type="text" name="contactSubject" id="contactSubject" value="" placeholder="Subject" required="" aria-required="true"> </div> <div class="form-group"> <input type="text" name="contactMessage" id="contactMessage" value="" placeholder="Your Message" required="" aria-required="true"> </div> <div class="form-group"> <button class="full-width btn btn--primary">Submit</button> <div class="submit-loader"> <div class="text-loader">Sending...</div> <div class="s-loader"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div> </div> </fieldset> </form> <!-- contact-warning --> <div class="message-warning"> Something went wrong. Please try again. </div> <!-- contact-success --> <div class="message-success"> Your message was sent, thank you!<br> </div> </div> <!--End Default Form-->

Answer 1

您可以preg_match()来验证 10 位手机号码：

preg_match('/^[0-9]{10}+$/', $mobile)

Answer 2

问题解决了..我将输入掩码更改为这种格式（“999-999-9999”），然后还对Php进行了更改以匹配js输入掩码，它是这样的：

if(!preg_match('/^[0-9]{3}-[0-9]{3}-[0-9]{4}$/', $phone)) { 

$error['phone'] = "请输入有效的电话号码。"; }

Answer 3

试试这个方法：

function validating($phone){
    $valid_number = filter_var($phone, FILTER_SANITIZE_NUMBER_INT);
    $valid_number = str_replace("-", "", $valid_number);
    if (strlen($valid_number) < 10 || strlen($valid_number) > 14) {
    echo "Invalid Number <br>";
    } else {
    echo "Valid Number <br>";
    }
}
$phone = "(999) 999-9999";
validating($phone);