如何在注册时使用AJAX检查用户名可用性

时间:2012-09-11 作者:Pollux Khafra

我正在使用buddypress,它使用自己的模板形式register.php 注册地址:http://mysite.com/register. 我正在寻找一种方法,通过ajax验证向用户显示他们输入的用户名是否可用。下面是表单中的一个片段。

<?php do_action( \'template_notices\' ) ?>
<?php do_action( \'bp_before_account_details_fields\' ) ?>
   <div class="register-section" id="basic-details-section">
      <?php /***** Basic Account Details ******/ ?>
  <?php do_action( \'bp_signup_username_errors\' ) ?>
  <input type="text" name="signup_username" id="signup_username" value="Username" />
  <?php do_action( \'bp_signup_email_errors\' ) ?>
  <input type="text" name="signup_email" id="signup_email" value="Email" />
   </div><!-- #basic-details-section -->

1 个回复
SO网友:marfarma

以下未经测试的代码应该可以帮助您开始。基本上,您可以在表单上添加一个显示目标,添加一些javascript以在用户离开用户名字段时添加验证,以及服务器端代码以将javascript排队,并注册ajax操作。

让我知道什么坏了,因为我确信这不会用完盒子。

[!--HTML to add to registration form after user_name (replace square brackets w/angled) --]
[div id="validate_user_login_results"][/div]

## contents of validate_login.js
##
jQuery(document).ready(function(){
     jQuery(\'body.login div#login form#loginform input#user_login\').onblur(function(){
          jQuery.post( ajaxurl
                       , {
                           \'action\':\'validate_user_login\',
                           \'username\': $(\'body.login div#login form#loginform input#user_login\').val()
                         }
                       , function(response){
                            var res = wpAjax.parseAjaxResponse(response, \'ajax-response\');
                            jQuery.each( res.responses, function() {
                                $(\'#validate_user_login_results\').load($this.data);
                                $("#validate_user_login_results").fadeIn("fast");
                                ## if $this.data == \'OK\' then success action else failure action
                            }
                         }
                     );
     });
});

// add to site plugin or functions.php
//
function wpse64865_add_validate_login_js(){  
  wp_enqueue_script( \'validate_login.js\'
                     , get_bloginfo(\'template_directory\') 
                      . "/scripts/validate_login.js" // change this to correctly locate javascript
                      , array( \'jquery\',\'wp-ajax-response\' ) ); 
}  
add_action( \'init\', \'wpse64865_add_validate_login_js\' );

add_action(\'wp_ajax_validate_user_login\', \'wpse64865_ajax_validate_user_login\');
add_action(\'wp_ajax_validate_nopriv_user_login\', \'wpse64865_ajax_validate_user_login\');


function wpse64865_ajax_validate_user_login() {
    //Handle request then generate response using WP_Ajax_Response
    $username = $_REQUEST[\'username\'];

    if ( validate_username( $username )) {
        $response = array( \'what\'=>\'validate_user_login\',
                           \'action\'=>\'validate_user_login_results\',
                           \'id\'=>\'1\',
                           \'data\'=>\'Not OK\' // login exists
                          );
    } else {
         $response = array( \'what\'=>\'validate_user_login\',
                           \'action\'=>\'validate_user_login_results\',
                           \'id\'=>\'1\',
                           \'data\'=>\'OK\' // check failed, login doesn\'t exist
                          );
    }
    $xmlResponse = new WP_Ajax_Response($response);
    $xmlResponse->send();
}
编辑:在函数代码中添加缺少的分号。php

结束

相关推荐

使用AJAX请求加载侧边栏

对于一个项目,我必须提高SEO性能,其中一个优化就是用ajax请求加载侧栏。我一直在通过文档、源代码、插件库寻找这个解决方案,但没有成功。所以我需要你的帮助和建议。有可能做到这一点吗?如果是,最好的方法是什么?谢谢