Πώς να επικυρώσετε μια φόρμα χρησιμοποιώντας το Form Validator στο Laravel 10

1
Πώς να επικυρώσετε μια φόρμα χρησιμοποιώντας το Form Validator στο Laravel 10

Απαιτείται επικύρωση φόρμας για να αποτραπεί η μη αυθεντική υποβολή δεδομένων στη βάση δεδομένων. Θα αποφύγει τη συλλογή δεδομένων σκουπιδιών. Ως εκ τούτου, είναι πάντα απαραίτητο να υπάρχει επικύρωση στη φόρμα. ο Επικύρωση φόρμας μπορεί να επιτευχθεί με δύο τρόπους. Μπορείτε να εφαρμόσετε επικύρωση φόρμας στην πλευρά του πελάτη. Ωστόσο, μπορείτε να βάλετε επικύρωση και από την πλευρά του διακομιστή. Συνιστάται πάντα να βάζετε επικύρωση φόρμας από την πλευρά του διακομιστή. Έτσι, εάν με κάποιο τρόπο, η επικύρωση από την πλευρά του πελάτη παραλειφθεί λόγω οποιουδήποτε σφάλματος, τότε η επικύρωση από την πλευρά του διακομιστή θα το αποτρέψει. Σήμερα, πρόκειται να εφαρμόσουμε Επικύρωση φόρμας στο Laravel 10. Θα προσθέσουμε την επικύρωση φόρμας από την πλευρά του διακομιστή στο Laravel 10. Επομένως, ας ξεκινήσουμε γρήγορα.

Προαπαιτούμενα

Για να εφαρμόσετε επικύρωση φόρμας στο Laravel 10, χρειάζεστε μια εφαρμογή Laravel 10. Ωστόσο, για να δημιουργήσετε μια εφαρμογή Laravel 10, χρειάζεστε τα παρακάτω εργαλεία.

  • PHP >=8.1
  • Συνθέτης
  • Διακομιστής Apache/Nginx
  • VS Code Editor (Προαιρετικό)
  • MySQL (έκδοση > 5)

Σε αυτή την ανάρτηση, θα επιτύχουμε το παρακάτω αποτέλεσμα. Λοιπόν, ας συνεχίσουμε με αυτήν την ανάρτηση.

Επικύρωση φόρμας στο Laravel 10
Επικύρωση φόρμας στο Laravel 10

Πώς να δημιουργήσετε μια εφαρμογή CRUD στο Laravel 10 για αρχάριους

Δημιουργήστε μια εφαρμογή Laravel 10 για επικύρωση φόρμας

Αυτό το βήμα είναι απαραίτητο Εάν δεν έχετε υπάρχουσες εφαρμογές Laravel 10. Αν όχι τότε, μπορείτε να το δημιουργήσετε χρησιμοποιώντας την παρακάτω εντολή.

composer create-project --prefer-dist laravel/laravel myapp

Μετά τη ρύθμιση του έργου, ρυθμίστε γρήγορα μια βάση δεδομένων.

Δημιουργία και διαμόρφωση βάσης δεδομένων για την εφαρμογή Laravel 10

Πρώτον, πρέπει να δημιουργήσετε μια βάση δεδομένων στη MySQL εάν δεν έχετε. Στη συνέχεια, δεύτερον, πρέπει να διαμορφώσετε τη βάση δεδομένων στο έργο Laravel.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=myapp_db
DB_USERNAME=root
DB_PASSWORD=root

Μόλις ολοκληρωθεί η διαμόρφωση του DB, ας κάνουμε λίγη δουλειά στη Φόρμα.

Δημιουργήστε μια προβολή για επικύρωση φόρμας στο Laravel 10

Για να εφαρμόσετε μια επικύρωση στη Φόρμα, θα χρειαστεί να έχετε μια προβολή στο Laravel. Επομένως, δημιουργήστε μια προβολή και προσθέστε τα παρακάτω αποσπάσματα.

<!doctype html>
<html lang="en">

<head>
    <title>Form Validation in Laravel 10</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <div class="container py-5">
        <h3 class="text-center fw-bold">Laravel 10 - Form Validation </h3>
        <form action="{{ route('employees.store') }}" method="post" class="needs-validation" autocomplete="off">
            @csrf
            <div class="row mt-4">
                <div class="col-xl-6 col-lg-6 mx-auto">
                    <div class="card shadow">
                        <div class="card-body">
                            <div class="form-floating mb-3">
                                <input type="text" name="name" class="form-control" id="name" placeholder="Name">
                                <label for="name">Name</label>
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="email" id="email" class="form-control" placeholder="Email" />
                                <label for="email"> Email </label>
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone Number" />
                                <label for="phone"> Phone Number </label>
                            </div>

                            <div class="form-floating my-3">
                                <input type="password" name="password" id="password" class="form-control" placeholder="Password" />
                                <label for="password"> Password </label>
                            </div>

                            <div class="form-floating my-3">
                                <input type="password" name="confirmPassword" id="confirmPassword" class="form-control" placeholder="Confirm Password" />
                                <label for="confirmPassword">Confirm Password </label>
                            </div>

                            <div class="form-floating my-3">
                                <select class="form-select" name="gender" id="gender">
                                    <option value="">Select Gender </option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                                <label for="gender"> Gender </label>
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="address" id="address" class="form-control" placeholder="Address" />
                                <label for="address">Address </label>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="form-group">
                                <button type="submit" class="btn btn-success btn-lg"> Save </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
    </script>
</body>

</html>

Αν ρίξετε μια ματιά στα παραπάνω αποσπάσματα κώδικα, θα δείτε ότι έχω προσθέσει μια φόρμα με μερικές εισόδους.

Ωστόσο, για να εκτελέσετε την παραπάνω φόρμα, θα χρειαστείτε ελεγκτή και δρομολόγηση.

Κυκλοφόρησε το Laravel 10 – Δείτε τα εκπληκτικά χαρακτηριστικά του Laravel 10

Δημιουργήστε έναν ελεγκτή στο Laravel 10

Μπορείτε να δημιουργήσετε έναν ελεγκτή χρησιμοποιώντας την παρακάτω εντολή. Θα χρησιμοποιήσουμε αυτόν τον ελεγκτή για τον χειρισμό του αιτήματος φόρμας.

php artisan make:controller EmployeeController

Αφού δημιουργήσουμε τον ελεγκτή, ας προσθέσουμε τη λογική επικύρωσης από την πλευρά του διακομιστή μέσα σε αυτόν.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EmployeeController extends Controller
{
    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        return view('create-employee');
    }
}

Τώρα, σε σχέση με την παραπάνω λειτουργία, θα χρειαστείτε μια διαδρομή.

Προσθέστε διαδρομές στο Laravel για επικύρωση φόρμας

Για να αποδώσετε τη φόρμα, πρέπει να προσθέσετε την παρακάτω διαδρομή στο web.php αρχείο.

<?php

use App\Http\Controllers\EmployeeController;
use Illuminate\Support\Facades\Route;


Route::get('employees', [EmployeeController::class, 'create'])->name('employees');

Τώρα, θα μπορείτε να εκτελέσετε την παραπάνω φόρμα. Επομένως, εκτελέστε την εφαρμογή και δείτε το αποτέλεσμα.

Βασική φόρμα στο Laravel 10
Βασική φόρμα στο Laravel 10

Τώρα, πρέπει να εφαρμόσετε την επικύρωση φόρμας για την παραπάνω φόρμα.

Εφαρμόστε την επικύρωση φόρμας στο Laravel 10

Για την επικύρωση της φόρμας, μπορείτε να γράψετε τους κανόνες επικύρωσης στον ίδιο ελεγκτή προσθέτοντας μια νέα συνάρτηση. Ρίξτε μια ματιά στο παρακάτω απόσπασμα.

/**
     * Store Employee Data
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:20',
            'email' => 'required|email|unique:users,email',
            'phone' => 'required|digits:10',
            'password' => 'required|alpha_num|min:6',
            'confirmPassword' => 'required|same:password',
            'gender' => 'required|string',
            'address' => 'required|string'
        ]);

        dd($request->all());
    }

Τώρα, σύμφωνα με τους παραπάνω κανόνες επικύρωσης, πρέπει να εμφανίσετε και το μήνυμα σφάλματος επικύρωσης στη φόρμα.

Αλλά, πριν από αυτό, πρέπει να προσθέσετε μια ακόμη διαδρομή για την υποβολή της φόρμας σε αυτήν τη λειτουργία.

Route::post('employees', [EmployeeController::class, 'store'])->name('employees.store');

Μετά από αυτό, μπορούμε να συνεχίσουμε να εμφανίζουμε σφάλματα επικύρωσης φόρμας.

Εμφάνιση μηνύματος σφάλματος επικύρωσης στο Laravel 10

Στο Laravel, μπορείτε να εμφανίσετε τα μηνύματα σφάλματος επικύρωσης με δύο τρόπους.

  1. Μαζικά σε ένα μέρος
  2. Επίπεδο πεδίου

Με τον πρώτο τρόπο, πρέπει να επαναλάβετε όλο το μήνυμα σφάλματος μέσω του βρόχου όπως φαίνεται παρακάτω.

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

Η έξοδος της εμφάνισης μηνυμάτων σφάλματος επικύρωσης χρησιμοποιώντας τον πρώτο τρόπο φαίνεται παρακάτω.

Εμφάνιση μηνυμάτων σφάλματος επικύρωσης
Εμφάνιση μηνυμάτων σφάλματος επικύρωσης

Με τον δεύτερο τρόπο, εμφανίζετε το μήνυμα σφάλματος ξεχωριστά ακριβώς κάτω από τις εισόδους της φόρμας. Αυτό θα φαίνεται πιο επαγγελματικό και προσωπικά, το συνιστώ.

Επομένως, πρέπει να ενημερώσετε το αρχείο blade σύμφωνα με το παρακάτω απόσπασμα.

<!doctype html>
<html lang="en">

<head>
    <title>Form Validation in Laravel 10</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
    <div class="container py-5">
        <h3 class="text-center fw-bold">Laravel 10 - Form Validation </h3>
        <form action="{{ route('employees.store') }}" method="post" class="needs-validation" autocomplete="off">
            @csrf
            <div class="row mt-4">
                <div class="col-xl-6 col-lg-6 mx-auto">
                    <div class="card shadow">
                        <div class="card-body">
                            <div class="form-floating mb-3">
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Name">
                                <label for="name">Name</label>
                                @error('name')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="email" id="email" class="form-control @error('email') is-invalid @enderror" placeholder="Email" />
                                <label for="email"> Email </label>
                                @error('email')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" placeholder="Phone Number" />
                                <label for="phone"> Phone Number </label>
                                @error('phone')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" placeholder="Password" />
                                <label for="password"> Password </label>
                                @error('password')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <input type="password" name="confirmPassword" id="confirmPassword" class="form-control @error('confirmPassword') is-invalid @enderror" placeholder="Confirm Password" />
                                <label for="confirmPassword">Confirm Password </label>
                                @error('confirmPassword')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <select class="form-select @error('gender') is-invalid @enderror" name="gender" id="gender">
                                    <option value="">Select Gender </option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                                <label for="gender"> Gender </label>
                                @error('gender')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>

                            <div class="form-floating my-3">
                                <input type="text" name="address" id="address" class="form-control @error('address') is-invalid @enderror" placeholder="Address" />
                                <label for="address">Address </label>
                                @error('address')
                                    <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="form-group">
                                <button type="submit" class="btn btn-success btn-lg"> Save </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
    </script>
</body>

</html>

Αφού προσθέσουμε το παραπάνω απόσπασμα, ας ανανεώσουμε τη σελίδα για να δούμε το ενημερωμένο αποτέλεσμα.

Εμφανίστε τα μηνύματα σφάλματος επικύρωσης χωριστά στο Laravel 10
Εμφανίστε τα μηνύματα σφάλματος επικύρωσης χωριστά στο Laravel 10

Εμφανίσαμε το μήνυμα σφάλματος ξεχωριστά για κάθε πεδίο. Ωστόσο, μπορούμε να προσαρμόσουμε τα μηνύματα σφάλματος ανάλογα με τις ανάγκες μας.

Ορίστε προσαρμοσμένο μήνυμα σφάλματος στην επικύρωση φόρμας Laravel

Από προεπιλογή, το Laravel εμφανίζει το προεπιλεγμένο μήνυμα σφάλματος για τον κανόνα επικύρωσης. Ωστόσο, μπορείτε να προσθέσετε προσαρμοσμένα μηνύματα σφάλματος προσθέτοντας στον πίνακα κανόνων επικύρωσης.

/**
     * Store Employee Data
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:20',
            'email' => 'required|email|unique:users,email',
            'phone' => 'required|digits:10',
            'password' => 'required|alpha_num|min:6',
            'confirmPassword' => 'required|same:password',
            'gender' => 'required|string',
            'address' => 'required|string'
        ],
        [
            'name.required' => 'Please enter your name',
            'name.string' => 'Please enter a valid name',
            'name.max' => 'Name must not be more than 20 chars',
            'email.required' => 'Please enter your email',
            'email.email' => 'Email must be a valid email address',
            'email.unique' => 'This email is already taken',
            'phone.required' => 'Please enter the phone number',
            'phone.numeric' => 'Phone number must be a number',
            'password.required' => 'Please enter the password',
            'password.alpha_num' => 'Password must be alpha numeric chars',
            'password.min' => 'Password should be minium 6 chars',
            'confirmPassword.required' => 'Please re-enter the password',
            'confirmPassword.same' => 'Password must be same',
            'gender.required' => 'Please select the gender',
            'gender.string' => 'Please select the gender',
            'address.required' => 'Please enter the address',
        ]);
    }

Τώρα, ελέγξτε το αποτέλεσμα του προσαρμοσμένου μηνύματος σφάλματος.

Προσθήκη προσαρμοσμένου μηνύματος λάθους στο Laravel 10
Προσθήκη προσαρμοσμένου μηνύματος λάθους στο Laravel 10

Η επικύρωση γίνεται εδώ. Ωστόσο, εξακολουθεί να υπάρχει ένα σημαντικό ζήτημα επαναφοράς αξίας στη φόρμα.

Εάν συμπληρώσετε σωστά όλα τα στοιχεία και υποβάλετε τη φόρμα, τότε η προηγούμενη τιμή δεν θα είναι προσυμπληρωμένη.

Επανασυμπλήρωση δεδομένων φόρμας μετά την ενεργοποίηση της επικύρωσης φόρμας

Για να συγκρατήσετε τα προηγούμενα δεδομένα στις εισαγωγές φόρμας, πρέπει να προσθέσετε ένα χαρακτηριστικό στις εισαγωγές φόρμας.

{{ old('inputName') }}

Έτσι, αφού προσθέσετε το πεδίο ονόματος σύμφωνα με την τρέχουσα φόρμα, θα μοιάζει με αυτό.

<input type="text" name="name" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Name" value="{{ old('name') }}">

Ομοίως, μπορείτε να το προσθέσετε στις υπόλοιπες εισόδους, όπως επιλογή, περιοχή κειμένου, ραδιόφωνο κ.λπ.

Αυτό είναι για αυτήν την ανάρτηση.

Schreibe einen Kommentar