Question

我想通过使用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的初学者。如有任何疑问，请在下方发表评论。

Answer 1

查看完代码后，有很多内容。有时在编程中，在编程之前定义并记下您想要实现的内容非常重要。通过编程开头可能会导致问题，就像你在这里遇到的那样。

一般反馈

没有进入错误细节，我的第一个观察是你正在尝试检查和验证电子邮件，在打字和提交时，它会像你有一个想法一样填充，并希望一次尝试许多概念，这会产生冲突。例如，您在jQuery中尝试click，但同时尝试使用keyup方法，这将永远不会有效，因为keyup如果不是click则无法工作在另一边。
我的第二个观察，这是我真正鼓励任何初学者程序员学习，给予属性正确的名称约定。与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
    }
}

关于http状态代码，请learn more。在这里我稍微更改了代码逻辑，因此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?

Answer 2

更改您的index.html和custom.js，如下面的代码段所示。

$(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>

Answer 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.";
    }
?>

Answer 4

有一种非常简单的方法可以解决这个问题。在html中将$this->Post->deleteAll(array('Post.topic_id' => $unwanted_topic_id), false);从input type更改为text：

email

然后，当用户进入输入框时，系统会提示他们输入@符号表示电子邮件地址，如果没有输入@符号，则会给出错误。

您还应该将按钮更改为提交，并将输入字段括在表单中。

你最终会是这样的：

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

我希望这会有所帮助

Answer 5

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

$(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');
            }
            });
        });

}）;

通过php和jQuery验证电子邮件

5 个答案: