Cách xác thực biểu mẫu trong Vue.js
Xác thực biểu mẫu , còn gọi là xác thực trường biểu mẫu, đảm bảo user điền vào tất cả các trường bắt buộc trong biểu mẫu web. Nếu một trường có giá trị không hợp lệ, nó sẽ hiển thị thông báo lỗi và ngăn việc gửi biểu mẫu cho đến khi các giá trị thỏa mãn tất cả các luật .Xác thực theo hướng mẫu là một loại xác thực biểu mẫu trong đó các luật xác thực được đặt trực tiếp trong các phần tử biểu mẫu bằng cách sử dụng lệnh.
Để triển khai xác thực theo hướng mẫu trong Vue.js, ta có thể sử dụng VeeValidate . VeeValidate là một plugin cho Vue.js cho phép bạn xác thực các trường nhập và hiển thị lỗi.
Đây là hình ảnh động về những gì bạn sẽ xây dựng trong hướng dẫn này:
Ở cuối hướng dẫn này, bạn sẽ có một biểu mẫu đăng ký sử dụng VeeValidate để xác thực các trường đầu vào.
Yêu cầu
Hướng dẫn này giả định kiến thức về các chuỗi và đối tượng JavaScript. Một số quen thuộc với Vue sẽ có lợi nhưng không bắt buộc. Để tìm hiểu thêm về Javascript, hãy xem loạt bài Cách viết mã trong Javascript .
Ta sẽ tập trung vào việc xây dựng một file HTML local duy nhất có tham chiếu đến các thư viện được lưu trữ trên cloud khác nhau. Có thể sử dụng @vue/cli để tạo dự án Vue và sử dụng trình quản lý gói để cài đặt vee-validate ; tuy nhiên, cách tiếp cận đó nằm ngoài phạm vi của hướng dẫn này.
Bước 1 - Cài đặt dự án Vue.js với VeeValidate
Bạn cần khung Vue.js và thư viện VeeValidate.
Đầu tiên, sử dụng terminal của bạn để tạo một file mới có tên register.html :
- nano register.html
Và thêm một số mã ban đầu cho một trang web:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Template Form Validation</title> </head> <body> <!-- ... --> </body> </html> Bản dựng trình duyệt cho Vue.js có sẵn thông qua cdnjs . Bản dựng trình duyệt cho VeeValidate có sẵn qua jsdelivr . Thêm cả hai vào <body> của file register.html :
<body> <!-- include the Vue.js framework --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script> <!-- include the VeeValidate library --> <script src="https://cdn.jsdelivr.net/npm/vee-validate@3.3.8/dist/vee-validate.min.js"></script> </body> Các file này được cung cấp bởi CDN (mạng phân phối nội dung). Không có gì để download hoặc lưu local .
Đến đây bạn đã có một trang web sẵn sàng để sử dụng các version ổn định mới nhất (tính đến thời điểm viết bài này) của Vue.js và VeeValidate.
Thêm Bootstrap và Font Awesome
Để cài đặt một số kiểu dáng, bạn có thể sử dụng Bootstrap . Để thêm một số hình tượng, bạn cũng có thể sử dụng Font Awesome .
Các bản dựng trình duyệt cho Bootstrap và Font Awesome có sẵn thông qua BootstrapCDN . Thêm cả hai vào <head> của file register.html :
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Template Form Validation</title> <!-- include the Bootsrap framework --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- include Font Awesome --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> Đến đây, bạn có Vue, VeeValidate, Bootstrap và Font Awesome. Tiếp theo, bạn sẽ tạo biểu mẫu để xác nhận.
Xây dựng đánh dấu biểu mẫu
Mẫu ví dụ này sẽ tìm kiếm năm phần thông tin từ user . Bạn cần name , email , username , password và password_confirmation .
Đầu tiên, thêm một số đánh dấu ban đầu cho biểu mẫu vào <body> của file register.html trước các <script> :
<body> <div class="container my-3"> <div class="row justify-content-around"> <div class="col-6 rounded shadow"> <h1 class="py-3">Sign up once and watch any of our free demos.</h1> <div id="signup-form"> <form> <!-- ... form fields ... --> </form> </div> </div> </div> </div> <!-- ... library script tags ... --> </body> Mã này cài đặt một <form> trống và sử dụng một số tiện ích Bootstrap để bố trí và giao diện.
Tiếp theo, thêm các trường biểu mẫu vào <form> . Bắt đầu với trường name :
<form> <div class="form-group"> <label for="name">Your Name</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span> <input type="text" id="name" name="name" placeholder="Name" class="form-control" /> </div> </div> </form> Mã này tạo ra một <label> cho name , một biểu tượng Font Awesome cho fa-user và một <input> cho name .
Bạn có thể bổ sung tương tự vào <form> cho các phần thông tin email , username , password và password_confirmation :
<form> <!-- ... name ... --> <div class="form-group"> <label for="email">Your Email</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span> <input type="email" id="email" name="email" placeholder="email@example.com" class="form-control" /> </div> </div> <div class="form-group"> <label for="username">Username</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span> <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" /> </div> </div> <div class="form-group"> <label for="password">Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" /> </div> </div> <div class="form-group"> <label for="password_confirmation">Confirm Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" /> </div> </div> </form> Mã này tạo ra các <label> , các biểu tượng Font Awesome và <input> . Mỗi đầu vào có một id và name duy nhất.
Thêm nút đăng ký để hoàn thành <form> :
<form> <!-- ... form fields ... --> <div class="form-group"> <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button> </div> </form> Mã này tạo một nút gửi lớn bằng cách sử dụng các kiểu Bootstrap.
Bạn có thể mở register.html trong trình duyệt web để kiểm tra tiến trình của ứng dụng.
Bước 2 - Tạo và gắn Vue Instance
Tiếp theo, bạn sẽ tạo một version Vue và gắn nó vào #signup-form .
Thêm một <script> ở cuối <body> và xác định signupForm :
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script> const signupForm = new Vue({ el: '#signup-form' }); </script> </body> Thêm thuộc tính vào đối tượng data :
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script> const signupForm = new Vue({ el: '#signup-form', data: { name: '', email: '', username: '', password: '', password_confirmation: '' } }); </script> </body> Sau đó, tham chiếu các thuộc tính với v-model trong mỗi trường.
Đối với trường name , hãy thêm thông tin sau:
<input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" /> Đối với trường email , hãy thêm thông tin sau:
<input type="email" id="email" name="email" placeholder="email@example.com" class="form-control" v-model="email" /> Đối với trường username , hãy thêm thông tin sau:
<input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" /> Đối với trường password , hãy thêm thông tin sau:
<input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" /> Cuối cùng, đối với trường password_confirmation , hãy thêm thông tin sau:
<input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" /> Đến đây, bạn có một version Vue với các mô hình cho name , email , username , password và password_confirmation .
Bước 3 - Thêm ValidationObserver và ValdiationProvider
Tiếp theo, bạn cần đăng ký ValidationObserver và ValidationProvider .
Bạn có thể thêm cả hai vào <script> ở cuối <body> :
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script> Vue.component('validation-observer', VeeValidate.ValidationObserver); Vue.component('validation-provider', VeeValidate.ValidationProvider); </script> <!-- ... vue instance script tag ... --> </body> Bây giờ, bạn có thể sử dụng <validation-observer> để bọc toàn bộ <form> . Và bạn có thể sử dụng <validation-provider> để bao bọc các trường:
<validation-observer> <form> <div class="form-group"> <validation-provider> <label for="name">Your Name</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span> <input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" /> </div> </validation-provider> </div> <div class="form-group"> <validation-provider> <label for="email">Your Email</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span> <input type="email" id="email" name="email" placeholder="email@example.com" class="form-control" v-model="email" /> </div> </validation-provider> </div> <div class="form-group"> <validation-provider> <label for="username">Username</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span> <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" /> </div> </validation-provider> </div> <div class="form-group"> <validation-provider> <label for="password">Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" /> </div> </validation-provider> </div> <div class="form-group"> <validation-provider> <label for="password_confirmation">Confirm Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" /> </div> </validation-provider> </div> <div class="form-group"> <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button> </div> </form> </validation-observer> Đến đây bạn có một biểu mẫu được chuẩn bị với <validation-observer> và <valdiation-provider> .
Bước 4 - Sử dụng Luật VeeValidate
Luật VeeValidate đặt giới hạn hoặc điều kiện về những gì có thể được nhập vào một hoặc nhiều trường. Luật xác thực được kiểm tra khi bạn cập nhật bản ghi chứa các trường yêu cầu xác thực. Nếu luật bị vi phạm, lỗi có thể truy xuất sẽ xảy ra.
Ví dụ: bạn có thể sử dụng trình xác thực được required :
<validation-provider rules="required"> Bạn có thể chuyển nhiều xác thực được phân tách bằng ký tự ống dẫn ( | ).
Ví dụ: bạn có thể sử dụng trình xác thực email required và:
<validation-provider rules="required|email"> Ngoài ra, bạn có thể chuyển một đối tượng để linh hoạt hơn:
<validation-provider :rules="{ required: true, email: true, regex: /[0-9]+/ }"> Bây giờ mỗi khi đầu vào thay đổi, trình xác thực sẽ chạy danh sách xác nhận từ trái sang phải, điền đối tượng trợ giúp lỗi khi nào đầu vào không xác thực được.
Tại thời điểm viết hướng dẫn này, VeeValidate có 30 luật để xác thực biểu mẫu với tùy chọn tạo luật của bạn .
Áp dụng luật
Tiếp theo, bạn cần nhập VeeValidateRules .
Bạn có thể thêm nó vào <script> ở cuối phần <body> của trong file register.html :
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script src="https://cdn.jsdelivr.net/npm/vee-validate@3.3.8/dist/rules.umd.js"></script> <!-- ... vue instance tags ... --> </body> Sau đó, bạn có thể lặp lại các luật để làm cho tất cả chúng khả dụng:
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script> Object.keys(VeeValidateRules).forEach(rule => { VeeValidate.extend(rule, VeeValidateRules[rule]); }); </script> <!-- ... vue instance tags ... --> </body> Và áp dụng các luật required cho tất cả các đầu vào:
<validation-provider rules="required"> Áp dụng nhiều luật
Đối với email , bạn cũng sẽ áp dụng luật cho các địa chỉ email hợp lệ:
<validation-provider rules="required|email"> Đối với password bạn cũng sẽ áp dụng luật cho độ dài tối thiểu là 6 ký tự:
<validation-provider rules="required|min:6"> Bây giờ, bạn có các luật required , email và min cho các trường.
Áp dụng xác thực trường chéo
Đối với password_confirmation bạn cần phải trùng với giá trị của password để hợp lệ. Để thực hiện điều này, bạn sẽ dựa vào ValidationObserver , cho phép password_confirmation nhận biết được password .
Thêm vid vào trường password , vì vậy password_confirmed có mục tiêu:
<validation-provider rules="required|min:6" vid="password"> Thêm luật confirmed vào trường password_confirmation để password_confirmed so sánh giá trị của nó với giá trị của password :
<validation-provider rules="required|confirmed:password"> Bây giờ, bạn có các luật required , email , min và confirmed cho các trường.
Thêm luật tùy chỉnh
VeeValidate cho phép bạn viết các luật và thông báo xác thực tùy chỉnh với extend và validate .
Thêm luật ngăn user đăng ký bằng một số từ bị hạn chế. Trong ví dụ này, bạn sẽ hạn chế user sử dụng các từ admin , password và administrator :
<body> <!-- ... form ... --> <!-- ... library script tags ... --> <script> // Declare an array of usernames that are invalid. const restricted_usernames = [ 'admin', 'password', 'administrator' ]; // Extend the custom rule. VeeValidate.extend('checkuser', { name: 'Restricted Usernames', validate: value => { return restricted_usernames.includes(value.toLowerCase()) ? false : !! value }, message: 'That {_field_} is unavailable.', }); </script> <!-- ... vue instance tags ... --> </body> Thêm luật tùy chỉnh vào trường username :
<validation-provider rules="required|checkuser"> Bây giờ, bạn đã required , email , min , confirmed , và checkuser luật cho các lĩnh vực. Tất cả các luật đã được cài đặt và bây giờ bạn có thể bắt đầu hiển thị thông báo lỗi.
Bước 5 - Truy cập các lỗi và cờ của VeeValidate
VeeValidate có sẵn errors . VeeValidate cũng có nhiều cờ cho thông tin trạng thái . Bạn có thể truy cập chúng bằng cách sử dụng v-slot của Vue.
Bạn cũng sẽ sử dụng v-show của Vue để hiển thị thông báo lỗi VeeValidate và sử dụng lớp invalid-feedback của Bootstrap để tạo kiểu cho lỗi.
Ngoài ra, bạn sẽ sử dụng cờ VeeValidate cho dirty , valid và invalid kết hợp với v-bind:class của Vue v-bind:class is-valid và is-invalid của Bootstrap để tạo kiểu cho các trường:
<validation-observer> <form> <div class="form-group"> <validation-provider rules="required|alpha" v-slot="{ dirty, valid, invalid, errors }"> <label for="name">Your Name</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-user" aria-hidden="true"></i></span></span> <input type="text" id="name" name="name" placeholder="Name" class="form-control" v-model="name" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" /> </div> <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div> </validation-provider> </div> <div class="form-group"> <validation-provider rules="required|email" v-slot="{ dirty, valid, invalid, errors }"> <label for="email">Your Email</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-envelope" aria-hidden="true"></i></span></span> <input type="email" id="email" name="email" placeholder="email@example.com" class="form-control" v-model="email" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" /> </div> <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div> </validation-provider> </div> <div class="form-group"> <validation-provider rules="required|checkuser" v-slot="{ dirty, valid, invalid, errors }"> <label for="username">Username</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-users" aria-hidden="true"></i></span></span> <input type="text" id="username" name="username" placeholder="Enter your username" class="form-control" v-model="username" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" /> </div> <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div> </validation-provider> </div> <div class="form-group"> <validation-provider rules="required|min:6" vid="password" v-slot="{ dirty, valid, invalid, errors }"> <label for="password">Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password" name="password" placeholder="Enter a password" class="form-control" v-model="password" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" /> </div> <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div> </validation-provider> </div> <div class="form-group"> <validation-provider rules="required|confirmed:password" v-slot="{ dirty, valid, invalid, errors }"> <label for="password_confirmation">Confirm Password</label> <div class="input-group"> <span class="input-group-prepend"><span class="input-group-text"><i class="fa fa-lock" aria-hidden="true"></i></span></span> <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Re-type password" class="form-control" v-model="password_confirmation" v-bind:class="{ 'is-valid': dirty && valid, 'is-invalid': dirty && invalid }" /> </div> <div class="invalid-feedback d-inline-block" v-show="errors">{{ errors[0] }}</div> </validation-provider> </div> <div class="form-group"> <button type="submit" class="btn btn-block btn-lg btn-primary">Register</button> </div> </form> </validation-observer> Đến đây, bạn có quyền truy cập vào các lỗi dirty , valid , invalid và errors . Bạn đã thêm logic để hiển thị thông báo lỗi dưới dạng phản hồi trong trường được liên kết. Nếu trường được tương tác và không hợp lệ, trường sẽ áp dụng lớp is-invalid của Bootstrap. Nếu trường được tương tác và hợp lệ, nó sẽ áp dụng lớp is-valid của Bootstrap.
Trong bước tiếp theo, bạn sẽ xử lý việc gửi biểu mẫu.
Bước 6 - Xử lý việc gửi biểu mẫu
VeeValidate cũng cung cấp một cờ invalid cho ValidationObserver và một hàm handleSubmit . Bạn có thể truy cập chúng bằng v-slot của Vue:
<validation-observer v-slot="{ invalid, handleSubmit }"> Sử dụng công cụ sửa đổi sự kiện của Vue để nắm bắt việc gửi biểu mẫu với @submit.prevent . Bạn cũng sẽ sử dụng HandSubmit của handleSubmit để ngăn việc gửi biểu mẫu cho đến khi tất cả các trường hợp lệ:
<form @submit.prevent="handleSubmit(onSubmit)"> Điều này sẽ gọi onSubmit có thể được định nghĩa là một thông báo console.log :
<script> const signupForm = new Vue({ el: '#signup-form', data: { name: '', email: '', username: '', password: '', password_confirmation: '' }, methods: { onSubmit: function() { console.log('Form has been submitted!'); } } }); </script> Giữ <button> ở trạng thái disabled để nó sẽ không gửi thông tin trong khi bất kỳ trường nào invalid :
<button type="submit" class="btn btn-block btn-lg btn-primary" v-bind:disabled="invalid">Register</button> Đến đây, bạn có thể mở register.html trong trình duyệt web và tương tác với biểu mẫu để kiểm tra xác nhận.
Kết luận
Trong hướng dẫn này, bạn đã trình bày cách xác thực đầu vào biểu mẫu bằng cách sử dụng phương pháp hướng mẫu. VeeValidate đã cho phép bạn xác thực đầu vào biểu mẫu bằng các luật hiện có, mở rộng luật mới, hiển thị lỗi và xử lý việc gửi biểu mẫu.
Nếu bạn muốn tìm hiểu thêm về Vue.js, hãy xem trang chủ đề Vue.js của ta để biết các bài tập và dự án lập trình.
Các tin liên quan
