التحقق من صلاحية إسم المستخدم بلغة php

Mahmoud Alrashidi · 8 فبراير 2021

لدي نموذج الإشتراك التالي:

<!DOCTYPE html>
<html dir="rtl" lang="ar">

<head>
    <title>تسجيل عضوية جديدة</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
            font-family: 'Cairo', sans-serif;
            text-align: right;
        }

        .box {
            width: 600px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;
            margin-top: 36px;
        }
    </style>
</head>

<body>
    <div class="container box">
        <h3 class="text-center mt-3">تسجيل عضوية جديدة</h3><br />
        <div class="form-group">
            <label>إسم المستخدم</label>
            <input type="text" name="username" id="username" class="form-control" autocomplete="off" />
            <br /><br />
            <button type="button" name="register" class="btn btn-info" id="register" disabled>إشترك الآن</button>
            <br />
        </div>
        <br />
        <br />
    </div>
</body>

</html>

يحتوي على حقل لإدخال إسم المُستخدم أريد التأكد من صلاحية إسم المُستخدم الذي يتم إدخاله و عرض رسالة: يجب أن يكون عدد أحرف إسم المستخدم أكبر من 3، و في حالة كان إسم المُستخدم قد تم إستعماله مُسبقاً من طرف مُستخدم آخر أي موجود في جدول المستخدمين يتم عرض رسالة إسم المُستخدم غير متاح و إلا يتم عرض إسم المستخدم متاح على أن تتم عملية التحقق بدون تحديث للصفحة بإستخدام ajax

سمير عبود · 9 فبراير 2021

يُمكنك إضافة عُنصر span تحت حقل الإدخال الخاص بإسم المُستخدم و إعطائه مُعرف لإستعماله في عرض الرسائل:

<span id="availability"></span>

ثم بإستعمال مكتبة jquery مثلا تقوم بالتسمع على حدث blur على حقل الإدخال و تنفيذ دالة مُعالجة للحدث تجلب من خلالها قيمة اسم المستخدم ثم إن كان الطول أكثر من 3 تقوم بعمل طلب من خلال ajax أما إن كان الطول أقل من 3 تعرض رسالة الخطأ التي تريد كما هو موضح أدناه:

$(function() {
  $('#username').on('blur', function() { // الإستماع للحدث blur على حقل الإدخال

    var username = $(this).val(); // جلب القيمة التي أدخلها المُستخدم
    if (username.length > 3) // التحقق من عدد الحروف
      $.ajax({ // ارسال طلب ajax
        url: 'check.php', // إرسال الطلب إلى الصفحة check.php
        method: "POST", // نوع الطلب Post
        data: {
          username: username // إرسال الإسم الذي تم إدخاله
        },
        success: function(data) { // في حالة النجاح
          // سنُرسل عدد السجلات المطابقة لإسم المُستخدم في قاعدة البيانات
          // إذا كان عدد السجلات لا يُساوي 0 يعني أن الإسم غير مُتاح
          // و إلا فإن الإسم مُتاح
          if (data != '0') { 
            $('#availability').html('<span class="text-danger">إسم المُستخدم غير متاح</span>');
            $('#register').attr("disabled", true);
          } else {
            $('#availability').html('<span class="text-success">إسم المستخدم متاح</span>');
            $('#register').attr("disabled", false);
          }
        }
      })
    else{ // عرض رسالة الخطأ الخاصة بعدد الحروف
      $('#register').attr("disabled", true);
      $('#availability').html('<span class="text-danger">يجب أن يكون عدد أحرف إسم المستخدم أكبر من 3</span>');
    }


  });
});

لقد قمنا بإرسال الطلب إلى الصفحة check.php سيكون مُحتوى الملف بهذا الشكل:

<?php
//check.php  
$con = mysqli_connect("localhost", "root", "root", "test_db"); // عملية الإتصال بقاعدة البيانات
if (isset($_POST["username"])) { // التحقق من إرسال إسم المُستخدم في الطلب
  $username = mysqli_real_escape_string($con, $_POST["username"]); // عمل escape لبعض المحارف التي تُسبب أخطاء في الإستعلام إذا وُجدت
  $query = "SELECT username FROM users WHERE username = '" . $username . "'";  // الإستعلام الذي سيتم تنفيذه
  $result = mysqli_query($con, $query); // تنفيذ الإستعلام
  echo mysqli_num_rows($result); // إرجاع عدد السجلات المُطابقة
}

و هذا هو مُحتوى صفحة الإشتراك بالكامل:

<!DOCTYPE html>
<html dir="rtl" lang="ar">

  <head>
    <title>تسجيل عضوية جديدة</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f1f1f1;
        font-family: 'Cairo', sans-serif;
        text-align: right;
      }

      .box {
        width: 600px;
        border: 1px solid #ccc;
        background-color: #fff;
        border-radius: 5px;
        margin-top: 36px;
      }
    </style>
  </head>

  <body>
    <div class="container box">
      <h3 class="text-center mt-3">تسجيل عضوية جديدة</h3><br />
      <div class="form-group">
        <label>إسم المستخدم</label>
        <input type="text" name="username" id="username" class="form-control" autocomplete="off" />
        <span id="availability"></span>
        <br /><br />
        <button type="button" name="register" class="btn btn-info" id="register" disabled>إشترك الآن</button>
        <br />
      </div>
      <br />
      <br />
    </div>


    <script>
      $(function() {
        $('#username').on('blur', function() { // الإستماع للحدث blur على حقل الإدخال

          var username = $(this).val(); // جلب القيمة التي أدخلها المُستخدم
          if (username.length > 3) // التحقق من عدد الحروف
            $.ajax({ // ارسال طلب ajax
              url: 'check.php', // إرسال الطلب إلى الصفحة check.php
              method: "POST", // نوع الطلب Post
              data: {
                username: username // إرسال الإسم الذي تم إدخاله
              },
              success: function(data) { // في حالة النجاح
                // سنُرسل عدد السجلات المطابقة لإسم المُستخدم في قاعدة البيانات
                // إذا كان عدد السجلات لا يُساوي 0 يعني أن الإسم غير مُتاح
                // و إلا فإن الإسم مُتاح
                if (data != '0') { 
                  $('#availability').html('<span class="text-danger">إسم المُستخدم غير متاح</span>');
                  $('#register').attr("disabled", true);
                } else {
                  $('#availability').html('<span class="text-success">إسم المستخدم متاح</span>');
                  $('#register').attr("disabled", false);
                }
              }
            })
          else{ // عرض رسالة الخطأ الخاصة بعدد الحروف
            $('#register').attr("disabled", true);
            $('#availability').html('<span class="text-danger">يجب أن يكون عدد أحرف إسم المستخدم أكبر من 3</span>');
          }


        });
      });
    </script>
  </body>

</html>

التحقق من صلاحية إسم المستخدم بلغة php

السؤال

Mahmoud Alrashidi

1 جواب على هذا السؤال

Recommended Posts

سمير عبود

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية