logo标签列表

jQuery验证插件 - 检查MySQL数据库中现有的用户名/电子邮件

javascriptphpjquerymysqlvalidation
10
我已成功创建了一个表单，可以将用户提交并添加到mysql数据库中。使用'jQuery Validator'插件进行表单验证非常好，只有检查用户名是否已存在于数据库中时出现问题...
我刚刚花了大约8个小时阅读和尝试找出一种使用'jQuery Validator'插件定义新方法的方法。我似乎无法理解如何通过jQuery检查输入的用户名或电子邮件，并返回它是否已存在于数据库中。
我的代码:
<script src="../assets/js/main.js"></script>
<script src="../assets/js/ajax.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<!-- FORM VALIDATION -->
<script type="text/javascript">


    jQuery.validator.addMethod("checkExists", 
function(value, element) {
    //No idea what to call here
}, 
"Username already exists."
);


        //<![CDATA[
        $(window).load(function(){
        $("form").validate({
        rules: {
            username: {minlength: 3, required: true, checkExists: true},
            email: {email: true, required: true},
            pass1: {minlength: 3, required: true},
            pass2: {minlength: 3, required: true, equalTo: "#pass1"},
            country: {required: true},
            tandc: {required: true},
        },
        messages: {
        username:   {required: "You need to enter a Username."},
        email:      {required: "You need to enter an Email Address."},
        pass1:      {required: "You need to enter a Password."},
        pass2:      {required: "You need to enter your password again.", equalTo: "Your passwords don't match."},
        country:    {required: "You need to tell us where you live."},
        tandc:      {required: "You need to read and agree to the Terms and Conditions to use CGE."}
        },


        showErrors: function(errorMap, errorList) {
        $.each(this.successList, function(index, value) {
        return $(value).popover("hide");
        });
        return $.each(errorList, function(index, value) {
        var _popover;
        console.log(value.message);
        _popover = $(value.element).popover({
        trigger: "manual",
        placement: "right",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
        return $(value.element).popover("show");
        });
        }
        });
        });//]]>
</script>

如果有聪明人能够修改我的代码并告诉我应该如何做，那将是非常有帮助的 - 我感觉自己快要疯了！提前感谢，迫不及待地想看到解决方案 :-)

编辑 - 这是我的当前代码

似乎完全没有反应，但我感觉我离成功更近了：

当前代码：

signup.php

    $(window).load(function(){
            $("form").validate({
            rules: {
                username: {minlength: 3, required: true},
                email: {email: true, required: true, remote: {url: "./validation/checkUnameEmail.php", type : "post"}},
                pass1: {minlength: 3, required: true},
                pass2: {minlength: 3, required: true, equalTo: "#pass1"},
                country: {required: true},
                tandc: {required: true}
},

checkUnameEmail.php

<?php
    include_once(".../php_includes/db_conx.php");
    $email = urldecode($_POST['email']);
    $result = mysqli_query($db_conx, "SELECT * FROM users WHERE email = '$email' LIMIT 1;");
    $num = mysqli_num_rows($result);
    if($num == 0){
        echo "true";
    } else {
        echo "E-Mail-Adresse schon registriert.";
    }
    mysqli_close($db_conx);
?>

*db_conx.php*

<?php
$db_conx = mysqli_connect("localhost", "root", "root", "membership");
//Evlauate the connection
if (mysqli_connect_errno()){
    echo mysqli_connect_error();
    exit();
}
?>
在你的自定义方法中使用Ajax。 - Jenson M John
@JensonMJohn，使用自定义方法进行简单的Ajax验证不起作用，因为Ajax是异步的，而jQuery.validator期望有一个返回值。 - bansi
3个回答
20
$.validator.addMethod("checkExists", function(value, element)
{
    var inputElem = $('#register-form :input[name="email"]'),
        data = { "emails" : inputElem.val() },
        eReport = ''; //error report

    $.ajax(
    {
        type: "POST",
        url: validateEmail.php,
        dataType: "json",
        data: data, 
        success: function(returnData)
        {
            if (returnData!== 'true')
            {
              return '<p>This email address is already registered.</p>';
            }
            else
            {
               return true;
            }
        },
        error: function(xhr, textStatus, errorThrown)
        {
            alert('ajax loading error... ... '+url + query);
            return false;
        }
    });

}, '');

或者

您可以使用远程方法，它允许您进行远程检查：http://docs.jquery.com/Plugins/Validation/Methods/remote

例如：

    $("#yourFormId").validate({
            rules: {
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "checkUnameEmail.php",
                        type: "post"
                     }
                }
            },
            messages: {
                email: {
                    required: "Please Enter Email!",
                    email: "This is not a valid email!",
                    remote: "Email already in use!"
                }
            }
        });

检查用户名邮箱.php //例如。

    <?php
    $registeredEmail = array('jenson1@jenson.in', 'jenson2@jenson.in', 'jenson3@jenson.in', 'jenson4@jenson.in', 'jenson5@jenson.in');

    $requestedEmail  = $_REQUEST['email'];

    if( in_array($requestedEmail, $registeredEmail) ){
        echo 'false';
    }
    else{
        echo 'true';
    }
    ?>
1
这看起来很棒，谢谢你的快速回复！我不明白为什么要额外添加“return $（“#email”）.val（）;”。那样不会发送两次电子邮件地址吗？另外，checkUnameEmail.php应该包含什么？再次感谢，你不知道我有多感激。 - user2910809
checkUnameEmail.php 是一个需要检查用户名/电子邮件是否存在的文件。 - Jenson M John
在 checkUnameEmail.php 的 else 部分中，您可以执行 echo "false"，并在验证器消息部分为电子邮件添加 remote: "E-Mail-Adresse schon registriert."。 - Jenson M John
@user2910809 你设置了远程邮件规则的消息吗？ - Jenson M John
1
谢谢Jenson，我刚看到你的回复。将远程类型从“post”更改为“get”就解决了问题。现在它可以完美地通知重复的用户名和电子邮件 :-) 唯一的问题是，尽管如此，表单仍然可以提交，我得试着想出解决方法。今天你救了一个n00b的命，谢谢Jenson。 - user2910809
显示剩余2条评论
1

js代码

username: {
        required: true,
        minlength: 5,
        remote: '/userExists'
       },

Php代码用于检查是否存在并返回消息

public function userExists()
{
    $user = User::all()->lists('username');
    if (in_array(Input::get('username'), $user)) {
        return Response::json(Input::get('username').' is already taken');
    } else {
        return Response::json(Input::get('username').' Username is available');
    }
}
0

针对WordPress和PHP

最重要的是，需要回显“true”或“false”，而不是返回true或false

使用jQuery或JS

   email: {
     required: true,
     minlength: 6,
     email: true,
     remote:{
        url : 'your ajax url',
        data: { 
                'action': 'is_user_exist',
              },
        },
   },

WordPress或PHP后台代码
在后台，您可以通过GET方法自动获取字段的值。
/*
 *@ Check user exists or not
 */
if( !function_exists('is_user_exists_ajax_function') ):
    function is_user_exists_ajax_function() {
        $email = $_GET['email'];
        if( empty($email) && is_email($email) ):
            wp_send_json_error( new \WP_Error( 'Bad Request' ) );
        endif;

        $is_email = email_exists( $email );

        if($is_email):
            echo 'false';
        else:
            echo 'true';
        endif;

        wp_die();
    }
    add_action( 'wp_ajax_is_user_exist', 'is_user_exists_ajax_function' ); 
    add_action( 'wp_ajax_nopriv_is_user_exist', 'is_user_exists_ajax_function' ); 
endif;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接