[Thực hành] Validation form đăng ký
NỘI DUNG BÀI VIẾT
Mục tiêu
Hiểu được cơ chế Validation thông qua Request
Mô tả
Trong phần này, chúng ta sẽ luyện tập sử dụng cơ chế Validation thông qua Request.
Hướng dẫn
Bước 1: Tạo ứng dụng Laravel có tên “validation”
Vào thư mục chúng ta muốn lưu trữ mã nguồn của dự án rồi gõ lệnh:
composer create-project laravel/laravel validation --prefer-dist
Đợi đến khi lệnh chạy kết thúc
![[Thực hành] Validation form đăng ký 1 Screen%20Shot%202019 12 16%20at%2009.33.39](https://i0.wp.com/james.codegym.vn/pluginfile.php/31669/mod_assign/intro/Screen%20Shot%202019-12-16%20at%2009.33.39.png?ssl=1)
Bước 2: vào trong thư mục code và mở toàn bộ tên trong thư mục bằng trình soạn thảo yêu thích
cd validation/
Bước 3: Chỉnh sửa file “routes/web.php”
Route::get('create', '[email protected]'); Route::post('store', '[email protected]')->name('store');
Bước 4: Tạo Controller “PostController”
php artisan make:controller PostController
Chỉnh sửa nội dung file “app/Http/Controllers/PostController.php”:
class PostController extends Controller { public function create() { return view('create'); } public function store(Request $request) { // Validate and store the post... } }
Bước 5: Tạo 1 giao diện form bằng html
Tạo file “create.blade.php” trong folder “resources/views/”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="main-content"> <h1>Form điền thông tin</h1> <form method="post" action="{{ route('store') }}"> {{ csrf_field() }} <label for="number">chỉ được nhập số</label> <input type="text" name="number"> <button type="submit">Kiểm tra</button> </form> </div> </body> </html>
Bước 6: Chạy ứng dụng và truy cập URL greeting để xem kết quả.
Gõ lệnh: php artisan serve
![[Thực hành] Validation form đăng ký 2 Screen%20Shot%202019 12 16%20at%2009.48.16](https://i0.wp.com/james.codegym.vn/pluginfile.php/31669/mod_assign/intro/Screen%20Shot%202019-12-16%20at%2009.48.16.png?ssl=1)
Kiểm tra giao diện đã tạo bằng cách truy cập “http://127.0.0.1:8000/create”.
![[Thực hành] Validation form đăng ký 3 Screen%20Shot%202019 12 16%20at%2009.54.59](https://i0.wp.com/james.codegym.vn/pluginfile.php/31669/mod_assign/intro/Screen%20Shot%202019-12-16%20at%2009.54.59.png?ssl=1)
Bước 7: Kiểm tra dữ liệu bằng Validation Laravel
Chỉnh sửa file “app/Http/Controllers/PostController.php”
public function store(Request $request) { $validatedData = $request->validate([ 'number' => 'required|numeric', ]); echo 'đã xác thực thành công'; }
Với đoạn lệnh này, chúng ta sẽ chấp nhận dữ liệu truyền lên từ input với name “number” kiểu dữ liệu là số nguyên
Bước 8: Kiểm tra kết quả
Khi nhập không phải số thì dữ liệu post không được chấp nhận và bị chuyển lại về form. Ngược lại, khi nhập đúng thì sẽ có thông báo
![[Thực hành] Validation form đăng ký 4 Screen%20Shot%202019 12 16%20at%2009.57.51](https://i0.wp.com/james.codegym.vn/pluginfile.php/31669/mod_assign/intro/Screen%20Shot%202019-12-16%20at%2009.57.51.png?ssl=1)
Bước 9: Hiển thị thông báo lỗi
Sửa nội dung file “resources/views/create.blade.php”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="main-content"> <h1>Form điền thông tin</h1> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form method="post" action="{{ route('store') }}"> {{ csrf_field() }} <label for="number">chỉ được nhập số</label> <input type="text" name="number"> <button type="submit">Kiểm tra</button> </form> </div> </body> </html>
Thực hiện kiểm tra với dữ liệu nhập vào không phải là số
![[Thực hành] Validation form đăng ký 5 Screen%20Shot%202019 12 16%20at%2009.59.51](https://i0.wp.com/james.codegym.vn/pluginfile.php/31669/mod_assign/intro/Screen%20Shot%202019-12-16%20at%2009.59.51.png?ssl=1)
Tổng kết
Qua bài tập trên chúng ta đã luyện tập:
- Kỹ năng xử lý validation
Leave a Reply