Как создать страницу регистрации в php и ajax, которая проверяет, существует ли определенное имя пользователя или нет без обновления страницы? - PullRequest
1 голос
/ 18 ноября 2010

У меня есть файл register.php, который создает новых пользователей для моего сайта. Но если человек использует имя пользователя, которое уже существует, ошибка генерируется только тогда, когда он вводит всю форму и отправляет. Как реализовать Ajax / Jquery, чтобы показать его без отправки формы?

Ответы [ 4 ]

3 голосов
/ 18 ноября 2010

Это на самом деле не так уж плохо, если вы знакомы с основами JS / Ajax.

Вам нужно будет вызвать функцию javascript со страницы регистрации.

HTML в регистрационной форме

<!--This is the textbox with the value we are checking-->
<!--onkeyup can be substituted by any other event you wish to use intead-->
<input onkeyup="checkUsername(this.value);" name="username" id="username" />

<!--This is where we'll display the response-->
<div id="response"></div>

Эта функция JS создаст объект ajax, передаст переменную username на страницу PHP для обработки и будет ожидать ответа ...

JavaScript

function checkUsername(username){

    //Construct the url, passing the username to the PHP page
    var url= 'checkNameAvailability.php?username=' + encodeURIComponent(username);

    if (ajax.readyState == 4 || ajax.readyState == 0) {
        ajax.open("POST", url, true);
        ajax.onreadystatechange = function (){
            if (ajax.readyState == 4) {    

                //When you get the result from the PHP, put it in the response div
                document.getElementById('response').innerHTML=ajax.responseText;
            }
        }; 
        ajax.send(null);
    }
}

//Just copy and paste this function - don't change it at all.
function getXmlObject() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if(window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            showError('Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.','Please Wait');
        }
    }

Затем страница PHP захватывает переменную username, обрабатывает ее любым необходимым способом (доступен ли он, достаточно ли длинен, имеет ли он недопустимые символы, не подходит ли он и т. Д.) И возвращает ответ.

checkNameAvailability.php

<?php

    //Accept a variable called 'username' that we are checking.
    $username=$_REQUEST['username'];

    //Run Checks to see if username is valid
    if ($username=="Dutchie") 
            die ("Username is reserved or already taken");
    if (strlen($username)<5) 
            die("The username is too short.");

   die("Username is Valid");

?>
2 голосов
/ 06 февраля 2011

Скопируйте это для страницы регистрации в HTML:

<?php include('vdaemon.php'); ?>
 <html>
 <head>
 <title>Registration</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link href="samples.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <h1>Registration</h1>
 <form id="Register" action="registration_p.php" method="POST" runat="vdaemon" disablebuttons="all">
   <table cellpadding="2" cellspacing="0" border="0">
     <tr>
       <td width="130">
         <vllabel validators="UserID,UserIDExist" errclass="error" for="UserID" cerrclass="controlerror">User ID:</vllabel>
       </td>
       <td width="140">
         <input name="UserID" type="text" class="control" id="UserID" size="15">
         <vlvalidator name="UserID" type="required" control="UserID" errmsg="User ID required">
        <vlvalidator name="UserIDExist" type="custom" control="UserID" errmsg="User ID already exist" function="UserIDCheck">
       </td>
       <td width="300" rowspan="7" valign="top">
         <vlsummary class="error" headertext="Error(s) found:" displaymode="bulletlist">
       </td>
     </tr>
     <tr>
       <td>
        <vllabel errclass="error" validators="Password,PassCmp" for="Password" cerrclass="controlerror">Password:</vllabel>
       </td>
       <td>
         <input name="Password" type="password" class="control" id="Password" size="15">
         <vlvalidator type="required" name="Password" control="Password" errmsg="Password required">
         <vlvalidator name="PassCmp" type="compare" control="Password" comparecontrol="Password2"
           operator="e" validtype="string" errmsg="Both Password fields must be equal">
       </td>
     </tr>
     <tr>
       <td>
        <vllabel validators="Password,PassCmp" errclass="error" for="Password2" cerrclass="controlerror">Confirm Password:</vllabel>
       </td>
       <td>
         <input name="Password2" type="PASSWORD" class="control" id="Password2" size="15">
       </td>
     </tr>
     <tr>
       <td>
        <vllabel errclass="error" validators="NameReq,NameRegExp" for="Name" cerrclass="controlerror">Name:</vllabel>
       </td>
       <td>
         <input name="Name" type="text" class="control" id="Name" size="15">
         <vlvalidator type="required" name="NameReq" control="Name" errmsg="Name required">
         <vlvalidator type="regexp" name="NameRegExp" control="Name" regexp="/^[A-Za-z'\s]*$/" errmsg="Invalid Name">
       </td>
     </tr>
     <tr>
       <td>
         <vllabel errclass="error" validators="EmailReq,Email" for="Email" cerrclass="controlerror">E-mail:</vllabel>
       </td>
       <td>
         <input name="Email" type="TEXT" class="control" id="Email" size="15">
         <vlvalidator type="required" name="EmailReq" control="Email" errmsg="E-mail required">
         <vlvalidator type="format" format="email" name="Email" control="Email" errmsg="Invalid E-mail">
       </td>
     </tr>
     <tr>
       <td colspan=2>
         <input name="Agreement" type="checkbox" id="Agreement" value="1">
         <vllabel errclass="error" validators="Agreement" for="Agreement">I agree with the terms of service</vllabel>
         <vlvalidator type="required" name="Agreement" control="Agreement" errmsg="Agreement checkbox must be selected">
       </td>
     </tr>
     <tr>
       <td colspan="2">
         <input type="submit" class="control" value="Register">
         <input type="reset" class="control" value="Reset">
       </td>
     </tr>
   </table>
 </form>
 </body>
 </html>
 <?php VDEnd(); ?>
0 голосов
/ 12 июня 2011

Вы можете сделать это при отправке формы или при размытии - или даже установить тайм-аут, когда они прекратят печатать, предполагая, что они завершили ввод желаемого имени пользователя. Затем просто используйте ajax для поиска имени пользователя. Вы также можете использовать $ .ajax для нескольких дополнительных опций.

0 голосов
/ 18 ноября 2010

Я думаю, лучший момент для проверки доступности имени пользователя - это когда текстовое поле имени пользователя теряет фокус (событие onblur).большинство сайтов, которые я посещаю, реализует такое поведение

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...