通过 php 和 jQuery 验证电子邮件 [关闭]答案

【问题标题】：Validating email through php and jQuery [closed]通过 php 和 jQuery 验证电子邮件 [关闭]
【发布时间】：2017-05-28 03:07:11
【问题描述】：

我想验证我使用 php 和 jquery 输入的电子邮件字段。但我无法弄清楚我的程序中的错误。

下面是index.html中的代码

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <p>Email: <input type="text" id="myInput" /></p>
        <p id="feedbackDiv"></p>
        <p><input type="button" id="myButton" value="Check" /></p>

    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

下面是custom.js中的代码

$(document).ready(function(){
    $('#myButton').on('click',function(){
        var x = $('#myInput').val();

        function validateEmail(mail){
            $.post('php/email.php',{email_value_server: mail},function(returnData){
                $('#feedbackDiv').html(returnData);
            });
        }

        $('#myInput').focusin(function(){
            if(x === ''){
                $('#feedbackDiv').html('Please fill the email address.');
            }else{
                validateEmail(x);
            }
        }).blur(function(){
            $('#feedbackDiv').html('');
        }).keyup(function(){
            validateEmail(x);
        });
    });
});

下面是email.php中的代码

<?php
    $y = $_POST['email_value_server'];
    if(isset($y)){
         if(!empty($y)){
             if(filter_var($y,FILTER_VALIDATE_EMAIL) === false){
                 echo "This doesn't appear to be valid email address.";
             }else{
                 echo "Valid email address.";
             }
         }
    }
?>

我是 jQuery 和 php 的初学者。如有任何疑问，请在下方评论。

【问题讨论】：

这里的错误是什么？您希望看到什么以及您真正看到了什么？
如果您没有在feedbackDiv 中获得信息，您可能无法将数据发送到您需要的真实文件。在你的函数中尝试简单的alert，如果你没有得到任何东西，也许你将数据发送到了错误的文件。你没有说是什么错误，所以我帮不了你
@u_mulder：在控制台中我没有说任何错误，它是空白的。我希望看到写在 php 文件中的消息，无论电子邮件地址是有效还是无效。

标签： javascript php jquery

【解决方案1】：

查看您的代码后，有很多东西。有时在编程中，重要的是在开始编程之前定义并写下您想要实现的目标。开始编程有时会导致像您在这里遇到的问题。

一般反馈

在不详细介绍错误的情况下，我的第一个观察结果是，您正在尝试检查和验证电子邮件，在输入和提交时，它就像您有一个想法并想一次尝试许多概念一样，这会产生冲突。例如，您尝试在 jQuery 中使用click，但同时尝试使用keyup 方法，这将永远无法工作，因为如果click 未打开，keyup 将无法工作，反之亦然。
我的第二个观察，这是我真正鼓励任何初学者程序员学习的东西，为属性提供正确的命名约定。像id=”myInput” 就叫id=myEmailInput、id=emailInput 或myButton 就叫它submitButton 或submitBtn 等等。重要的是叫它任何人都能理解的东西，想象一下你有几个按钮和输入字段，很难记住哪个按钮和 myInput 是什么，这也是留给您和您的口味的东西。
即使您的代码正常工作，通过键入 (keyup) 方法通过 Ajax 检查无效电子邮件也不是一个好习惯，这将花费您在服务器端进行大量查找。我会在客户端的第一步和当它看起来相同时让我的代码检查电子邮件格式，而不是进行服务器/php 查找，以便您最终可以进行数据库查找或任何操作。

还有一些其他的东西。检查电子邮件可以通过 html5 (HTML5 Email Validation) 轻松完成，您可以单独使用 JavaScript、jQuery 或 PHP 或任何其他技术或同时使用任何其他技术来改进它或添加额外的功能，这一切都取决于您的目标和要求。

回到您的代码，作为答案，我将允许自己修改您的代码以使其正常工作并添加一些解释。也就是说，这可以通过多种方式完成，我的回答只是示例，您可以按照最适合自己的方式进行更改。

我也尽最大可能尝试将其保留为您的风格，并使用 PHP、jQuery 和 Ajax 所有这些，希望它可以帮助您实现目标并提高您的技能。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
    </title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/custom.css"/>
</head>
<body>
<p>Email: <input type="text" id="myInput"/>
<span id="feedbackDiv"></span>
</p>
<p><input type="button" id="myButton" value="Check"/></p>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

在 HTML 中，我只是使用 SPAN 将错误/成功消息保留在一行中的主要更改。

PHP：

<?php

if (isset($_POST['email']))
{
    $email = $_POST['email'];

    if (filter_var($email, FILTER_VALIDATE_EMAIL))
    {
        http_response_code(200);
        echo $email . ' is valid email';
        // Do eventually email look up in database
        // something like
        // if email exist in db than msg "Email Exist" else msg "Email Does not Exist"
    } else {
        http_response_code(412);
        // Do something else or just leave it as is
    }
}

致learn more关于http状态码。而且这里我对代码逻辑做了一点改动，所以php可以返回一个http状态给Ajax调用。

JavaScript：

$(document).ready(function () {

    // if you need to disable and enable button depending on email validity.
    //disableBtn(true);

    // each time you press and release the key it will check
    $('#myInput').on('keyup', function (e) {
        var $input = $(this);
        console.log($input);
        action($input);
    });

    // you can always click Check for force check
    $('#myButton').on('click', function (e) {
        var $input = $('#myInput');
        action($input);
    });

    function action(passData) {

        var $input = passData
            , value = $input.val()
            , data = {
            email: value
        };

        // if empty alert message would disappear
        if (value != "") {
            // Pre validate email on client side to reduce the server lookup
            if (validateEmailOnClientSide(value)) {
                $.ajax({
                    method: 'POST',
                    url: 'email.php',
                    data: data,
                    // if server return valid email then we get Green text
                    success: function (returnData) {
                        $('#feedbackDiv').css('color', 'green').html(returnData);
                        //disableBtn(true);
                    },
                    // if server return invalid email then we get Red text
                    error: function (xhr, status, error) {
                        $('#feedbackDiv').css('color', 'red').html(value + " is not valid email");
                        //disableBtn(false);
                    },
                    dataType: 'text'
                });
            } else {
                // Red text from browser side
                $('#feedbackDiv').css('color', 'red').html(value + " is not valid email");
                //disableBtn(false);
            }
        } else {
            // Emptying text
            $('#feedbackDiv').html("");
            //disableBtn(false);
        }

    }

    function validateEmailOnClientSide(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }

    function disableBtn(boolean) {
        $("#myButton").attr("disabled", boolean);
    }

});

如果电子邮件无效，您最终可以禁用提交按钮，如果它变为有效，则启用它，只需取消注释代码 disableBtn(true); 和 disableBtn(false); 中的所有功能

输出示例： 这是一个示例，您可以通过输入有效和无效的电子邮件即时收到绿色或红色消息。当然，如果您提交检查无效电子邮件，您的过程与输入它的过程相同。

我使用的一些参考资料：

其中一些灵感来自answer。
Best way to check if AJAX request was successful in jQuery
Validate email address in JavaScript?

【讨论】：

我肯定会提倡使用 HTML5。无需 JavaScript！
@Luke thx 对于您的评论，我已经在我的回答中提到了这一点，但我的回答也涵盖了 OP 的主要问题，现在 OP 可以选择进一步研究最适合他的方法。

【解决方案2】：

更改您的 index.html 和您的 custom.js，如下面的 sn-p 所示。

$(document).ready(function(){
        function postEmail(emailObj){
              // Set to true, if an element (with a required attribute) has no value.
              if (emailObj.validity.valueMissing === true) {
                 alert("Empty email address!");
               } 
              // Set to true, if an element's value does not match its pattern attribute.
              if(emailObj.validity.patternMismatch === true) {
                 alert("Wrong pattern in email address!");
               }
              // Set to true, if an element's value exceeds its maxLength attribute.
              if(emailObj.validity.tooLong === true) {
                 alert("Too long email address!");
               }
              // Set to true, if an element's value is valid.
              if(emailObj.validity.valid === true) {
                console.log(emailObj.value);
                $.post('php/email.php',{email_value_server: emailObj.value},function(returnData){
                $('#feedbackDiv').html(returnData);
                });
               } 
            
        }   
        $('#myInput').on("keydown",function(e){
            // detect key that was pressed by it's code
            var keyCode = e.keyCode ? e.keyCode : e.which;
            // if enter was pressed post email
            if(keyCode===13) {
               var $_this = $(this).get(0);
                postEmail($_this);
            }   
        });
        // post email on button click
        $('#myButton').on("click",function(){
               var $_this = $('#myInput').get(0);
               postEmail($_this); 
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html lang="en">
        <head>
             <title>
             </title>
             <meta charset="utf-8" />
             <link rel="stylesheet" type="text/css" href="css/custom.css" />
        </head>
        <body>
            <p>Email: <input type="email" id="myInput" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" maxLength="100" required></p> <!-- this way you validate input client-side also -->
            <p id="feedbackDiv"></p>
            <p><input type="button" id="myButton" value="Check" /></p>
    
        <!--<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>-->
        <script type="text/javascript" src="js/custom.js" ></script>
        </body>
    </html>

【讨论】：

【解决方案3】：

您的 $('#myInput') 绑定嵌入在按钮的 click 处理程序中。首先，您需要将该代码移到处理程序之外。试试这个：

$(document).ready(function(){
    function validateEmail(mail){
        $.post('php/email.php',{email_value_server: mail},function(returnData){
            $('#feedbackDiv').html(returnData);
        });
    }

    $('#myInput').focusin(function(){
        var x = $(this).val();
        if(x === ''){
            $('#feedbackDiv').html('Please fill the email address.');
        }else{
            validateEmail(x);
        }
    }).blur(function(){
        $('#feedbackDiv').html('');
    }).keyup(function(){
        validateEmail($(this).val());
    });
});

更新

如果您只想在提交时发送电子邮件检查（可能是个好主意），那么它会简单一些。

$(document).ready(function(){
    function validateEmail(mail){
        $.post('php/email.php',{email_value_server: mail},function(returnData){
            $('#feedbackDiv').html(returnData);
        });
    }

    $('#myButton').click(function(){
        var x = $('#myInput').val();
        if(x){
            validateEmail(x);
        } else {
            $('#feedbackDiv').html('Please fill the email address.');
        }
    });
});

您的 PHP 也需要一些工作。如果未设置，$y = $_POST['email_value_server'] 将失败。你需要像这样检查它：

<?php
    $y = isset($_POST['email_value_server']) ? $_POST['email_value_server'] : NULL;
    // this will also check for empty or NULL
    if(filter_var($y, FILTER_VALIDATE_EMAIL) === false){
         echo "This doesn't appear to be valid email address.";
    } else {
        echo "Valid email address.";
    }
?>

【讨论】：

【解决方案4】：

有一个非常简单的方法可以纠正这个问题。在您的 html 中将 input type 从 text 更改为 email：

<p>Email: <input type="email" id="myInput"/>  /*note the amendment*/
<span id="feedbackDiv"></span>
</p>

然后，当用户在输入框中输入时，会提示输入@符号，表示邮箱地址，如果没有输入@符号，则会报错。

您还应该将您的按钮更改为提交，并将您的输入字段包含在一个表单中。

你最终会是这样的：

<form action="email.php" method="POST">
<p>Email: <input type="email" id="myInput"/> 
<span id="feedbackDiv"></span>
</p>
<p><input type="submit" id="myButton" value="Check" /></p>
</form>

希望对你有帮助

【讨论】：

【解决方案5】：

//最好通过 id 获取值，因为 class 可能对于表单中的其他输入字段框很常见

$(document).ready(function() {               
$('#Email_id').focusout(function(){  

$('#Email_id').filter(function(){

               var emil=$('#Email_id').val();
          var emailReg = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
        if( !emailReg.test( emil ) ) {
            console.log('Please enter valid email');
            } else {
            console.log('Thank you for your valid email');
            }
            });
        });

});

【讨论】：