التحقق من صلاحية إسم المستخدم بلغة 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

سمير عبود

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية