通过php和jQuery验证电子邮件

我想通过使用php和jquery验证我输入的电子邮件字段.但我无法弄清楚我的计划中的错误.

下面是代码 index.html

    
         
         
         
    
    
        
Email: 
        

        


    
    
    

下面是代码 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

我是jQuery和php的初学者.如有任何疑问,请在下面评论.

查看完代码后,有很多内容.有时在编程中,在开始编程之前定义和写下你想要实现的内容是很重要的.开始编程可能会导致问题,就像你在这里遇到的那样.

一般反馈

没有错误的细节,我的第一个观察是你正在尝试检查和验证电子邮件,在打字和提交时,它会像你有一个想法一样填充,并且想要一次尝试许多概念,这会产生冲突.例如,你正在尝试使用clickjQuery,但同时尝试使用keyup方法,这将永远不会起作用,因为keyup如果没有,click则无法工作,反之亦然.

我的第二个观察,这是我真正鼓励任何初学者程序员学习,给予属性正确的名称约定.就像id=”myInput”刚才打电话id=myEmailInput,id=emailInput或者myButton只是把它submitButton或submitBtn等等.重要的是把它的东西任何一个都可以理解,试想一下,你有几个按钮和输入字段,这将是很难记住哪个按钮是什么myInput,那就是一些东西也留给你和你的味道.

即使如此,如果您的代码正常工作,通过键入(keyup)方法检查Ajax上的无效电子邮件也不是一个好习惯,这将花费您在服务器端进行大量查找.我会让我的代码在客户端的第一步检查电子邮件格式,当它看起来相同时,而不是让服务器/ php查找,这样你最终可以进行数据库查找或行动.

还有其他一些东西.检查电子邮件可以通过html5(HTML5电子邮件验证)轻松完成,您可以通过使用JavaScript,jQuery或PHP或任何其他技术单独或两者来改进它或制作额外的功能,这些都取决于您的目标和要求.

回到你的代码,作为答案我将允许自己修改你的代码,使其工作,并添加一些解释.也就是说,这可以通过多种方式完成,而我的答案就是您最适合自己的方式改变它的例子.

我也最好尽量保持它的风格,并使用PHP,jQuery和Ajax,希望它可以帮助您实现目标并提高您的技能.

HTML:

    
    
    


Email: 

在HTML中,主要的变化我只是使用SPAN将错误/成功消息保存在一行中.

PHP:

要了解有关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);

输出示例: 
这是一个示例,您可以通过键入有效且无效的电子邮件来获取绿色或红色消息.当然,如果您提交检查无效的电子邮件,则您必须执行与键入相同的过程.



我使用的一些参考文献:


其中一些灵感来自这个答案.
检查AJAX请求是否在jQuery中成功的最佳方法
在JavaScript中验证电子邮件地址？