اعتبار سنجی با جاوااسکریپت یا جی کوئری

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

سلام وقت بخیر امید وارم حالتون خوب باشه ممنون از تریس خوبتون و مطالبی که تمام کمال با حوصله توضیح میدهید ممنون که کم نمیزارید

سوالم اینه که چطوری می‌توانید به جای این که فرم را با php ولیدیت کنیم قبل از تحویل اون به بک اند و php اون رو با جاوا اسکریپت یا جی کوئری اعتبار سنجی کنیم سمت کاربر و بعد اونا بفرستیم بک اند ؟؟؟

سلام،

یک مثال ساده: تصور کنید یک فرمی داریم که یک فیلد username داره و یک دکمه submit و تگی با id=error برای نمایش خطا.

چک میشود که اگر username وارد شده توسط کاربر کمتر از 3 کاراکتر باشد یا اینکه فیلد خالی باشد، فرم ارسال نشود و خطا نمایش داده شود:

 $('#myForm').on('submit', function(event) {
        const username = $('#username').val();
        if (username === '') {
            event.preventDefault(); // Prevents form submission
            $('#error').text('Username cannot be empty!');
        } else if (username.length < 3) {
            event.preventDefault(); // Prevents form submission
            $('#error').text('Username must be at least 3 characters long.');
        } else {
            $('#error').text(''); // Clears error message
        }
});

البته این نکته حائز اهمیت است(که حتماً میدانید)، ولیدیت سمت کلاینت فقط به دلیل UX و تجربه بهتر کاربر و همچنین جلوگیری از باراضافی روی سرور خواهد بود وگرنه سمت سرور هم باید ولیدیت صورت بگیرد.

محسن موحد ۲۹ مرداد ۱۴۰۲، ۲۰:۳۹

ممنون از راهنمایی شما بله درست میفرمایید

سوال من اینجاس چطوری در صورت درست بودن شرط اون رو به بک اند پاس بدیم الان شما فقط شرط رو چک کردید ولی عمل ارسال اطلاعات رو به بک اند رو انجام ندادید، الان من اگر کد‌های بک اند رو هم بنویسیم همزمان با این کد‌ها اجرا میشه و این کد‌ها بی فایده میشه درسته ؟

mohammad hossein mousavi ۳۰ مرداد ۱۴۰۲، ۱۱:۵۳

عمل ارسال اطلاعات رو خود form انجام میده. نیازی نیست کاری کنیم.

فقط در سمت سرور اطلاعات را براساس اینکه method فرم post باشد یا get با آرایه‌های سوپر گلوبال $_GET و $_POST دریافت میکنیم.

مثال فرم لاگین ساده:

ولیدیشن با جی کوئری:

$(document).ready(function() {
    $("form").submit(function(e) {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        if(username === "" || password === "") {
            e.preventDefault();
            alert("Both fields are required!");
        } else if(username.length < 5) {
            e.preventDefault();
            alert("Username should be at least 5 characters!");
        } else if(password.length < 8) {
            e.preventDefault();
            alert("Password should be at least 8 characters!");
        }
    });
});

اگر داخل هیچ if ای نرود، پس form به سمت action=server.php ارسال میشود.

فایل server.php:

// received data
$username = $_POST['username'];
$password = $_POST['password'];
// simple validation
if(empty($username) || empty($password)) {
    die("Both fields are required!");
} else {
    // you can check with the database and...// but here I have written a simple validationif($username === "admin" && $password === "12345") {
        echo "Login successful!";
    } else {
        echo "Invalid credentials!";
    }
}

وقتی form سابمیت شود، داده‌ها به صفحه server.php ارسال میشوند و اینجا یک ولیدیشن ساده انجام داده ام که میبینید.

البته میشه به دیتابیس وصل شد و بعد از احراز هویت سشن و کوکی ست کرد و ...

یک مدل دیگر از ارسال داده‌ها به سمت سرور بصورت Ajax هست.

به روش ajax صفحه رفرش و تغییر نمیکند و در جا اطلاعات ارسال میشود به سمت سرور.

اگر منظورتان به روش ajax بوده است، باید بعد از ولیدیت کردن اطلاعات با جاوااسکریپت (jQuery) با متد‌های $.ajax یا $.post یا $.get داده‌های فرم را به سمت سرور ارسال کرد.

حالا مثالی از ارسال اطلاعات فرم بالا به روش AJAX مینویسم.

روش کار به این صورت است که مجدد با jQuery ولیدیت ساده را تکرار میکنم و بعد از validate کردن فرم داده‌های username و password را به روش ajax ارسال میکنم.

کدهای اعتبارسنجی فرم و ارسال با jQuery:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        if(username === "" || password === "") {
            alert("Both fields are required!");
        } else if(username.length < 5) {
            alert("Username should be at least 5 characters!");
        } else if(password.length < 8) {
            alert("Password should be at least 8 characters!");
        } else {
            $.ajax({
                url: 'server.php',
                type: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(response) {
                    alert(response);
                },
                error: function(err) {
                    alert('Error occurred during login attempt.');
                }
            });
        }
    });
});

کدهای سمت سرور با PHP:

if($_SERVER['REQUEST_METHOD'] == "POST") {
    $username = $_POST['username'];
    $password = $_POST['password'];
    // server side validations are done in this section.
    // making sure everything is correct...
    
    echo "Logged in successfully!";
}

بهترین پاسخ

محسن موحد ۳۰ مرداد ۱۴۰۲، ۱۴:۲۷