Cách sử dụng xác thực biểu mẫu trong Vue
Hầu hết mọi ứng dụng web đều sử dụng biểu mẫu theo một cách nào đó, vì vậy các nhà phát triển luôn phải xử lý xác nhận biểu mẫu. Nếu bạn là một nhà phát triển mới, có thể khó quyết định cách tốt nhất để tiếp cận điều này. Tùy thuộc vào ngăn xếp bạn đang sử dụng, có nhiều tùy chọn để lựa chọn.Trong hướng dẫn này, ta sẽ tìm hiểu cách bạn có thể triển khai xác thực biểu mẫu trong biểu mẫu của bạn với Vue.
Ta muốn hiển thị thông báo lỗi ngay khi user nhấn vào nút gửi — không cần gửi phản hồi đến server — vì quá trình xác thực ở phía client . Việc có xác thực phía client không loại bỏ nhu cầu xác thực các yêu cầu trên server của bạn — điều đó cũng rất quan trọng.
Xây dựng ví dụ đầu tiên
Với điều đó đã được cài đặt , hãy xây dựng biểu mẫu của ta . Đầu tiên, thành phần Ứng dụng của ta sẽ chỉ hiển thị thành phần Đăng ký:
<div id="app"> <div> <Register /> </div> </div> Phần script sẽ giống như sau:
new Vue({ el: "#app" }) Đối với thành phần Đăng ký, ta muốn hiển thị một biểu mẫu với các trường đầu vào:
<div> <h2>Register</h2> <form @submit.prevent="register" method="post"> <div> <label>Name:</label> <input type="text" v-model="user.name" /> <div>{{ errors.name }}</div> </div> <div> <label>Phone:</label> <input type="text" v-model="user.phone" /> <div>{{ errors.phone }}</div> </div> <div> <label>Email:</label> <input type="text" v-model="user.email" /> <div>{{ errors.email }}</div> </div> <div> <label>Password:</label> <input type="password" v-model="user.password" /> <div>{{ errors.password }}</div> </div> <div> <button type="submit">Submit</button> </div> </form> </div> Phương thức .prevent được sử dụng để dừng hành vi mặc định của biểu mẫu khi gửi được thực hiện. Biểu mẫu có bốn trường đầu vào cho tên, email, điện thoại và password . Tất cả những điều này cần xác nhận của riêng chúng. Nếu có lỗi với bất kỳ đầu vào nào, nó sẽ được hiển thị bên dưới trường nhập.
Vì mỗi trường là duy nhất, ta cần đảm bảo xác nhận phù hợp để trùng với tính duy nhất của chúng. Một điều chung chung là không có trường nào được để trống. Ta có thể kiểm tra bằng cách sử dụng !field.length , field sẽ tương đương với bất kỳ trường đầu vào nào mà ta có. Để giữ cho mã của ta sạch sẽ, các trình xác thực sẽ được xác định bên ngoài version Vue. Nếu bạn đang xây dựng điều này trong một ứng dụng được hỗ trợ bằng Vue CLI, điều đó nghĩa là bạn sẽ có trình xác thực trong một file riêng biệt.
const validateName = name => { if (!name.length) { return { valid: false, error: "This field is required" }; } return { valid: true, error: null }; }; const validatePhone = phone => { if (!phone.length) { return { valid: false, error: 'This field is required.' }; } if (!phone.match(/^[+][(]?[0-9]{1,3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm)) { return { valid: false, error: 'Please, enter a valid international phone number.' }; } return { valid: true, error: null }; } const validateEmail = email => { if (!email.length) { return { valid: false, error: "This field is required" }; } if (!email.match(/^\w+([.-]?\w+)_@\w+(_[_.-]?\w+)_(.\w{2,3})+$/)) { return { valid: false, error: "Please, enter a valid email." }; } return { valid: true, error: null }; }; const validatePassword = password => { if (!password.length) { return { valid: false, error: "This field is required" }; } if (password.length < 7) { return { valid: false, error: "Password is too short" }; } return { valid: true, error: null }; }; Đối với các trường duy nhất như email và số điện thoại, ta sử dụng regex đảm bảo nó trùng với một mẫu cụ thể.
Mỗi trình xác nhận là một hàm sẽ nhận trường đầu vào dưới dạng tham số. Như bạn thấy ở trên, mỗi hàm trả về valid và error . Đây là những gì ta sẽ sử dụng để xác định xem có nên gửi biểu mẫu hay không. Để thấy điều đó hoạt động, đây là cách thành phần Đăng ký sẽ trông như thế nào:
Vue.component('register', { template: '#register', data() { return { user: { email: '', password: '', name: '', phone: '' }, valid: true, success: false, errors: {}, message: null } }, methods: { register() { this.errors = {} const validName = validateName(this.user.name); this.errors.name = validName.error; if (this.valid) { this.valid = validName.valid } const validPhone = validatePhone(this.user.phone); this.errors.phone = validPhone.error; if (this.valid) { this.valid = validPhone.valid } const validEmail = validateEmail(this.user.email); this.errors.email = validEmail.error; if (this.valid) { this.valid = validEmail.valid } const validPassword = validatePassword(this.user.password) this.errors.password = validPassword.error if (this.valid) { this.valid = validPassword.valid } if (this.valid) { alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user)) } } } }) Nếu trình xác thực trả về lỗi cho bất kỳ trường nào, lỗi được trả về sẽ được lưu trong errors.fieldName — trong đó fieldName là tên của trường đầu vào, sau đó được hiển thị để user xem điều gì đã xảy ra.
Khi tất cả các trường trả về valid true , ta có thể tiếp tục gửi biểu mẫu. Đối với hướng dẫn này, ta đang hiển thị một hộp cảnh báo.
Sử dụng Joi
Joi cho phép bạn xây dựng các schemas cho các đối tượng JavaScript, được dùng để xác thực các đầu vào. Nó thường được sử dụng khi làm việc với Express và Restify. Ta có thể sử dụng nó trong hướng dẫn này bằng cách xác định một schemas cho thành phần Đăng ký của ta .
Đây là giản đồ:
import Joi from "joi"; const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm; const phone = Joi.string().regex(phoneRegex) .options({ language: { string: { regex: { base: 'must be a valid phone number' } } } }); const userValidation = {}; userValidation.create = { first_name: Joi.string().min(2).max(24).required(), email: Joi.string().email().required(), password: Joi.string().min(7).required(), phone: phone.required() }; Sau đó, ta có thể sử dụng schemas trong thành phần Đăng ký của bạn để xác thực các đầu vào của user :
Vue.component('register', { template: '#register', data() { return { user: { name: '', email: '', password: '', phone: '' }, valid: false, success: false, errors: {}, issues: {} } }, methods: { // method that validates the user input using the schema validate(value, schema) { const result = Joi.validate(value, schema, { abortEarly: false }); if (result.error) { result.error.details.forEach((error) => { this.issues[error.path[0]] = error.message; }); return false; } return true; }, register() { // validation method is called and passed the inputs and schema this.validate(this.user, userValidation.create); if (Object.keys(this.issues).length > 0) { this.errors = this.issues; return false; } alert('HURRAAYYY!! :-)\n\n' + JSON.stringify(this.user)) } } }) Ta khai báo một phương thức validate sẽ chấp nhận đầu vào của user và schemas mà ta đã xác định. Nếu lỗi được tìm thấy sau khi xác thực, ta sẽ trả về false và các lỗi gặp phải. Nếu không có lỗi, ta hiển thị hộp cảnh báo như ta đã làm trước đây.
Kết luận
VeeValidate và Vuelidate là những lựa chọn thay thế mà bạn cũng có thể sử dụng khi xử lý xác thực biểu mẫu trong ứng dụng Vue của bạn .
Các tin liên quan
