Cách xác thực biểu mẫu đăng nhập bằng React và Formik
Để đảm bảo một phần tử biểu mẫu của ứng dụng web của bạn đang trả về dữ liệu hợp lệ, sẽ hữu ích khi xây dựng tính năng xác thực tự động vào mã của bạn. Điều này cũng đúng trong React, vì việc tạo xác thực biểu mẫu sớm thường có thể giúp bạn tránh gặp phải lỗi trong quá trình thực hiện.Trong React, làm việc với và xác thực các biểu mẫu có thể hơi dài dòng. Để làm cho mã của bạn dễ quản lý hơn, bạn có thể sử dụng một gói như Formik để xây dựng biểu mẫu của bạn .
Trong hướng dẫn này, bạn sẽ tạo một dự án React, thêm gói Formik, tùy chỉnh thành phần Formik với lệnh gọi lại onSubmit và chức năng validate thông báo lỗi, sau đó hiển thị các thông báo lỗi đó cho user .
Đến cuối hướng dẫn này, bạn sẽ có một dự án giống như ví dụ trực tiếp này trên CodeSandbox .
Yêu cầu
- Node.js được cài đặt local , bạn có thể thực hiện theo Cách cài đặt Node.js và tạo môi trường phát triển local
- Tạo ứng dụng React , bạn có thể thực hiện theo Cách cài đặt một dự án React
Bước 1 - Cài đặt dự án
Sử dụng Create React App để tạo một dự án. Đối với mục đích của hướng dẫn, bạn có thể đặt tên cho biểu mẫu xác nhận-phản ứng-đăng nhập dự án của bạn .
- npx create-react-app validate-react-login-form
Đến đây bạn có thể thay đổi folder dự án, khởi động server nút và xem nó trong trình duyệt web.
- cd validate-react-login-form
- npm start
Nếu bạn đã cài đặt yarn , thông báo của bạn có thể hướng dẫn bạn sử dụng yarn start thay vì npm start . Nếu bạn muốn có hướng dẫn npm , bạn có thể sử --use-npm cờ --use-npm khi tạo dự án của bạn . Bạn có thể sử dụng yarn hoặc npm cho hướng dẫn này.
Bạn cũng có thể mở folder dự án này trong trình soạn thảo yêu thích của bạn để tạo và sửa đổi file .
Tạo Ứng dụng React sẽ bao gồm một số file , nhưng với mục đích của hướng dẫn này, bạn sẽ chỉ trực tiếp tạo hoặc sửa đổi ba file : index.js , index.css và ValidatedLoginForm.js .
Bước 2 - Cài đặt phụ thuộc
Bây giờ ta đã tạo xong dự án ban đầu, ta sẽ cài đặt ba gói: Formik , email-validator và Yup .
Formik giúp việc xử lý xác thực, thông báo lỗi và gửi biểu mẫu dễ quản lý hơn.
Trong terminal của bạn, hãy cài đặt Formik:
- npm install formik
email-validator là một gói nhỏ được sử dụng để xác thực email.
Nếu terminal của bạn, hãy cài đặt email-validator :
- npm install email-validator
Yup là một trình xác thực schemas thường được sử dụng cùng với Formik.
Trong terminal của bạn, hãy cài đặt Yup:
- npm install yup
Đến đây bạn đã cài đặt các gói cần thiết, bạn đã sẵn sàng để tạo thành phần biểu mẫu đã được xác thực.
Bước 3 - Tạo thành phần biểu mẫu được xác thực
Đến đây bạn đã cài đặt các phụ thuộc, bạn có thể bắt đầu viết ValidatedFormComponent của bạn . Hiện tại, bạn sẽ tạo những điều cơ bản và nhập nó vào file root trong ứng dụng để hiển thị nó.
Để làm điều này, bạn sẽ làm như sau:
- Tạo một thành phần chức năng mới
- Thêm nội dung hiển thị giả
- Nhập nó vào
index.js
Tạo một file mới trong folder src của bạn có tên là ValidatedLoginForm.js . Bên trong file đó, hãy thêm mã cơ bản cho một thành phần chức năng:
import React from "react"; const ValidatedLoginForm = () => ( <div> <h1>Validated Form Component</h1> </div> ); export default ValidatedLoginForm; Sau đó, đưa nó vào index.js của bạn:
import ValidatedLoginForm from "./ValidatedLoginForm"; Tiếp theo, hãy tham khảo thành phần:
<ValidatedLoginForm /> Khi bạn đặt tất cả các phần đó lại với nhau, index.js sẽ trông như thế này:
import React from "react"; import ReactDOM from "react-dom"; import ValidatedLoginForm from "./ValidatedLoginForm"; function App() { return ( <div className="App"> <h1>Validated Login Form</h1> <ValidatedLoginForm /> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); Bạn sẽ thấy thành phần biểu mẫu được hiển thị:
Bây giờ, hãy truy cập lại ValidatedLoginForm.js để triển khai Formik.
Đầu tiên, nhập Formik, email-validator và Yup trong thành phần mới của bạn:
import { Formik } from "formik"; import * as EmailValidator from "email-validator"; // used when validating with a self-implemented approach import * as Yup from "yup"; // used when validating with a pre-built solution Bây giờ, hãy viết thẻ Formik với các giá trị ban đầu. Hãy nghĩ về các giá trị ban đầu như cài đặt trạng thái của bạn ban đầu.
Bạn cũng cần một cuộc gọi lại onSubmit . Lệnh gọi lại này sẽ nhận hai tham số, giá trị và một đối tượng, mà bạn có thể cấu trúc lại. Các giá trị đại diện cho các giá trị đầu vào từ biểu mẫu của bạn. Bạn sẽ thêm một số mã giả vào đây để mô phỏng cuộc gọi đăng nhập không đồng bộ, sau đó đăng xuất các giá trị là gì.
Trong lệnh gọi lại, hãy gọi hàm setSubmitting đã bị hủy từ các tham số thứ hai. Điều này sẽ cho phép bạn bật hoặc tắt nút Gửi trong khi cuộc gọi đăng nhập không đồng bộ đang diễn ra:
<Formik initialValues={{ email: "", password: "" }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { console.log("Logging in", values); setSubmitting(false); }, 500); }} > <h1>Validated Login Form</h1> </Formik> Kết xuất đạo cụ
Thành phần Formik sử dụng các đạo cụ kết xuất để cung cấp các biến và hàm nhất định cho biểu mẫu mà ta tạo.
Tóm lại, render props được sử dụng để truyền các thuộc tính cho các phần tử con của một thành phần. Trong trường hợp này, Formik sẽ chuyển các thuộc tính đến mã biểu mẫu của bạn, đó là mã con. Lưu ý bạn đang sử dụng hàm hủy để tham chiếu đến một số biến và hàm cụ thể.
{props => { const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props; return ( <div> <h1>Validated Login Form</h1> </div> ); }} Đến đây, ValidatedLoginForm.js sẽ giống như sau:
import React from "react"; import { Formik } from "formik"; import * as EmailValidator from "email-validator"; import * as Yup from "yup"; const ValidatedLoginForm = () => ( <Formik initialValues={{ email: "", password: "" }} onSubmit={(values, { setSubmitting }) => { setTimeout(() => { console.log("Logging in", values); setSubmitting(false); }, 500); }} > {props => { const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props; return ( <div> <h1>Validated Login Form</h1> </div> ); }} </Formik> ); export default ValidatedLoginForm; Bước 4 - Hiển thị Biểu mẫu
Đến đây bạn có thể bắt đầu viết mã để hiển thị biểu mẫu. Biểu mẫu sẽ có hai đầu vào (email và password ), nhãn cho mỗi đầu và nút gửi.
{props => { const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props; return ( <form onSubmit={handleSubmit}> <label htmlFor="email">Email</label> <input id="email" name="email" type="text" placeholder="Enter your email" /> <label htmlFor="password">Password</label> <input id="password" name="password" type="password" placeholder="Enter your password" /> <button type="submit"> Login </button> </form> ); }} Lưu ý onSubmit đang gọi handleSubmit từ props.
Trước đó, người ta đã đề cập rằng bạn có thể vô hiệu hóa nút gửi của bạn trong khi user đang cố đăng nhập. Bạn có thể thêm thay đổi đó ngay bây giờ bằng cách sử dụng thuộc tính isSubmitting mà bạn đã hủy từ các đạo cụ trước đó:
<button type="submit" disabled={isSubmitting}> Login </button> Bạn có thể sử dụng CSS sau cho file styles.css của bạn :
.App { font-family: sans-serif; } h1 { text-align: center; } form { max-width: 500px; width: 100%; margin: 0 auto; } label, input { display: block; width: 100%; } label { margin-bottom: 5px; height: 22px; } input { margin-bottom: 20px; padding: 10px; border-radius: 3px; border: 1px solid #777; } input.error { border-color: red; } .input-feedback { color: rgb(235, 54, 54); margin-top: -15px; font-size: 14px; margin-bottom: 20px; } button { padding: 10px 15px; background-color: rgb(70, 153, 179); color: white; border: 1px solid rgb(70, 153, 179); transition: ease-in-out background-color 250ms, ease-in-out color 250ms; } button:hover { cursor: pointer; background-color: white; color: rgb(70, 153, 179); } Ngoài ra, nhập styles.css trong index.js .
import "./styles.css"; Bước 5 - Thêm Logic tin nhắn xác thực
Bây giờ hãy xác thực đầu vào của ta . Bước đầu tiên là xác định những ràng buộc nào ta muốn có đối với đầu vào của bạn . Hãy bắt đầu với email. Đầu vào email phải:
- Được yêu cầu.
- Trông giống như một email thực sự.
Nhập password phải:
- Được yêu cầu.
- Dài ít nhất tám ký tự.
- Chứa ít nhất một số.
Ta sẽ đề cập đến hai cách để tạo những tin nhắn này, một cách thủ công và một cách sử dụng Yup.
Viết giải pháp xác thực password của bạn
Tùy chọn đầu tiên là tự tạo chức năng xác thực của ta . Mục đích của hàm là lặp lại các giá trị trong biểu mẫu của ta , xác thực các giá trị này theo bất kỳ cách nào mà ta thấy phù hợp và trả về một đối tượng errors có các cặp giá trị chính là value và message .
Bên trong thẻ Formik, hãy bắt đầu bằng việc thêm mã sau. Điều này sẽ luôn thêm lỗi Invalid email cho email.
validate={values => { let errors = {}; errors.email = "Invalid email"; return errors; }} Bây giờ, bạn có thể đảm bảo user đã nhập nội dung nào đó cho email:
validate={values => { let errors = {}; if (!values.email) { errors.email = "Required"; } return errors; }} Sau đó, bạn có thể kiểm tra xem email có phải là email hợp lệ hay không bằng cách sử dụng gói xác thực email. Điều này sẽ trông gần giống như kiểm tra email tương đương:
validate={values => { let errors = {}; if (!values.email) { errors.email = "Required"; } else if (!EmailValidator.validate(values.email)) { errors.email = "Invalid email address."; } return errors; }} Điều đó sẽ chăm sóc email, vì vậy bạn sẽ làm việc trên biểu mẫu password . Trước tiên, bạn sẽ kiểm tra xem user nhập nội dung nào:
validate={values => { let errors = {}; if (!values.password) { errors.password = "Required"; } return errors; }} Đến đây bạn cần đảm bảo độ dài ít nhất là tám ký tự:
validate={values => { const passwordRegex = /(?=.*[0-9])/; if (!values.password) { errors.password = "Required"; } else if (values.password.length < 8) { errors.password = "Password must be 8 characters long."; } return errors; }} Cuối cùng, hãy kiểm tra xem password có chứa ít nhất một số hay không. Đối với điều này, bạn có thể sử dụng regex:
validate={values => { let errors = {}; const passwordRegex = /(?=.*[0-9])/; if (!values.password) { errors.password = "Required"; } else if (values.password.length < 8) { errors.password = "Password must be 8 characters long."; } else if (!passwordRegex.test(values.password)) { errors.password = "Invalid password. Must contain one number."; } return errors; }} Tệp đã hoàn thành sẽ giống như sau:
validate={values => { let errors = {}; if (!values.email) { errors.email = "Required"; } else if (!EmailValidator.validate(values.email)) { errors.email = "Invalid email address."; } const passwordRegex = /(?=.*[0-9])/; if (!values.password) { errors.password = "Required"; } else if (values.password.length < 8) { errors.password = "Password must be 8 characters long."; } else if (!passwordRegex.test(values.password)) { errors.password = "Invalid password. Must contain one number."; } return errors; }} Sử dụng Giải pháp xác thực password của bên thứ ba
Bạn có thể nhận thấy rằng việc xử lý logic xác thực theo cách riêng của ta sẽ hơi dài dòng. Bạn phải thực hiện thủ công tất cả các kiểm tra. Yup có thể giúp bạn tiết kiệm một số công việc này. Khi sử dụng Yup, bạn sẽ không còn thấy thuộc tính Validate mà thay vào đó là dùng validationSchema .
Hãy bắt đầu với email. Đây là cách xác nhận tương đương bằng Yup:
validationSchema={Yup.object().shape({ email: Yup.string() .email() .required("Required") })} Bây giờ, đối với password :
validationSchema={Yup.object().shape({ email: Yup.string() .email() .required("Required"), password: Yup.string() .required("No password provided.") .min(8, "Password is too short - should be 8 chars minimum.") .matches(/(?=.*[0-9])/, "Password must contain a number.") })} Đến đây bạn đã khám phá hai phương pháp khác nhau để xác thực biểu mẫu. Tiếp theo bạn sẽ cập nhật mã để hiển thị thông báo lỗi.
Bước 6 - Hiển thị xác thực và thông báo lỗi
Bây giờ ta đã có logic để tạo thông báo lỗi, ta cần hiển thị chúng. Bạn cần cập nhật các đầu vào trong biểu mẫu của bạn để thực hiện việc này.
Ta cần cập nhật một số thuộc tính cho cả đầu vào email và password :
-
value -
onChange -
onBlur -
className
Áp dụng các đạo cụ kết xuất cho trường email
Hãy bắt đầu bằng cách cập nhật value , onChange và onBlur . Mỗi trong số này sẽ sử dụng các thuộc tính từ các đạo cụ kết xuất:
<input id="email" name="email" type="text" placeholder="Enter your email" value={values.email} onChange={handleChange} onBlur={handleBlur} /> Sau đó, bạn có thể thêm một lớp "lỗi" có điều kiện trong trường hợp có bất kỳ lỗi nào. Bạn có thể kiểm tra lỗi bằng cách xem đối tượng errors .
Bạn cũng có thể kiểm tra thuộc tính đã chạm để xem liệu user đã tương tác với đầu vào email hay chưa trước khi hiển thị thông báo lỗi.
<input id="email" name="email" type="text" placeholder="Enter your email" value={values.email} onChange={handleChange} onBlur={handleBlur} className={errors.email && touched.email && "error"} /> Cuối cùng, nếu có lỗi, bạn sẽ hiển thị chúng cho user .
Kết quả cuối cùng cho trường email sẽ như thế này:
<label htmlFor="email">Email</label> <input id="email" name="email" type="text" placeholder="Enter your email" value={values.email} onChange={handleChange} onBlur={handleBlur} className={errors.email && touched.email && "error"} /> {errors.email && touched.email && ( <div className="input-feedback">{errors.email}</div> )} Áp dụng các đạo cụ kết xuất cho trường password
Đến đây bạn cần làm tương tự với password . Các bước này tương tự như email.
Kết quả cuối cùng cho trường password sẽ như thế này:
<label htmlFor="password">Password</label> <input id="password" name="password" type="password" placeholder="Enter your password" value={values.password} onChange={handleChange} onBlur={handleBlur} className={errors.password && touched.password && "error"} /> {errors.password && touched.password && ( <div className="input-feedback">{errors.password}</div> )} Bước 7 - Kiểm tra xác thực
Bây giờ biểu mẫu của bạn đã hoàn tất, bạn đã sẵn sàng để kiểm tra nó. Bạn có thể bắt đầu bằng cách nhấp vào nút mà không cần nhập bất cứ thứ gì. Bạn sẽ thấy thông báo xác thực:
Bây giờ, ta có thể nhận được thông báo cụ thể hơn để thử nghiệm Làm mới trang web để làm điều này. Nhấp vào bên trong của đầu vào email, nhưng không nhập bất kỳ thứ gì:
Sau đó, nhấp ra khỏi đầu vào. Bạn sẽ thấy thông báo Required bật lên. Lưu ý thông báo này không tự động bật lên khi tải trang. Bạn chỉ muốn hiển thị thông báo lỗi sau khi user đã tương tác với đầu vào.
Bây giờ, hãy bắt đầu nhập. Bạn sẽ nhận được một thông báo về email không hợp lệ.
Nhập một email hợp lệ và xem thông báo lỗi của bạn biến mất.
Bây giờ, làm tương tự cho password . Nhấp vào đầu vào, sau đó nhấn đi, và bạn sẽ nhận được thông báo cần thiết.
Sau đó, bắt đầu nhập và bạn sẽ thấy xác nhận độ dài.
Sau đó, nhập tám hoặc nhiều ký tự không bao gồm số và bạn sẽ thấy thông báo must contain a number .
Cuối cùng, thêm một số và thông báo lỗi sẽ không xuất hiện .
Kết luận
Đến đây bạn đã tạo một biểu mẫu với xác thực tự động trong React, sử dụng Formik và Yum.
Để biết thêm các hướng dẫn về React, hãy xem trang Chủ đề React của ta .
Các tin liên quan
