Reac-bootstrap chọn xác thực

Đầu tiên, hãy nhanh chóng thảo luận về sự khác biệt giữa Bootstrap và React Bootstrap. Bootstrap là một trong những thư viện CSS lâu đời nhất và được sử dụng nhiều nhất cho Javascript. Nó được Twitter tung ra vào năm 2009 và được tải xuống gần 2. 5 triệu lần mỗi tuần

Bootstrap không bao giờ có ý định sử dụng với React—React thậm chí còn chưa được tạo khi Bootstrap ra mắt. Mặc dù là một thư viện JavaScript mạnh mẽ, Bootstrap không hoạt động tốt với React. Vấn đề là ở chỗ, Bootstrap phụ thuộc rất nhiều vào JQuery để thao tác DOM, trong khi React sử dụng DOM ảo để thực hiện các thay đổi. Bất kỳ thay đổi nào được áp dụng cho DOM bằng Bootstrap qua JQuery đều không được React chọn

React Bootstrap loại bỏ sự phụ thuộc vào JQuery và đóng gói tất cả các thành phần gốc của Bootstrap thành các thành phần React thuần túy. Các thành phần này, cùng với các mẫu và kiểu CSS hiện có của Bootstrap, có thể được nhập dưới dạng các thành phần React vào một dự án React.  

Bắt đầu

Để bắt đầu xác thực biểu mẫu, chúng tôi sẽ tạo một ứng dụng React bằng cách sử dụng Tạo ứng dụng React và cài đặt cả Bootstrap và React Bootstrap vào dự án

$ npx create-react-app react-bootstrap-form-validation
$ cd react-bootstrap-form-validation
$ npm install --save bootstrap react-bootstrap

Khi các phụ thuộc được cài đặt, hãy khởi động ứng dụng

$ npm start

và đi đến http. //máy chủ cục bộ. 3000 để kiểm tra xem ứng dụng có đang chạy không

‍

‍

Tuyệt quá. Chúng tôi đã sẵn sàng để bắt đầu viết mã. Mở dự án trong trình chỉnh sửa yêu thích của bạn (VS Code là một lựa chọn tốt) và nhập biểu định kiểu Bootstrap. Điều này sẽ cho phép chúng tôi sử dụng các lớp Bootstrap trên các thành phần và thành phần của chúng tôi. Bạn cũng có thể xóa mã soạn sẵn khỏi Ứng dụng. js.  

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
 
function App() {
 return (
   

     {/* remove everything between the outermost divs */}
   
 );
}
 
export default App;

Khi thành phần xác thực biểu mẫu email của chúng tôi hoàn tất, chúng tôi sẽ nhập nó vào tệp này và hiển thị nó giữa các div

Xây dựng thành phần biểu mẫu

Tạo một tệp mới có tên EmailForm. js bên cạnh Ứng dụng. js bên trong src. Đây là tệp mà chúng tôi sẽ viết tất cả logic xác thực biểu mẫu của mình và hiển thị thành phần biểu mẫu email.  

Bên trong tệp, nhập thành phần Biểu mẫu và thành phần Nút. Tạo thành phần React cấp cao nhất có tên là EmailForm và hiển thị thành phần Biểu mẫu bên trong

import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
 
export const EmailForm = () => {
   return (

       

           
               Enter Your Email
               
           
           Submit Form
       
   	
   )
}

Hãy phá vỡ điều này

Thành phần Biểu mẫu bao bọc toàn bộ biểu mẫu và cho phép chúng tôi truy cập các phần tử con của nó thông qua ký hiệu dấu chấm. Nhóm biểu mẫu bao bọc các phần riêng biệt của biểu mẫu. Trong trường hợp này, chúng tôi chỉ có một phần. đầu vào email. Nhãn biểu mẫu cho phép chúng tôi đặt nhãn cho biểu mẫu

Phần logic chính ở đây là Điều khiển biểu mẫu. Bằng cách nói với thành phần này rằng chúng tôi đang mong đợi một loại “email”, chúng tôi đã nói với React Bootstrap đủ để cung cấp cho chúng tôi một số xác thực biểu mẫu cơ bản. Chúng tôi sẽ xem cách xác thực này hoạt động trong giây lát

Bởi vì chúng tôi đã bao gồm thành phần Nút bên trong Biểu mẫu và cung cấp cho nó một loại "gửi", React Bootstrap biết rằng nút này cần thực hiện xác thực biểu mẫu và gửi biểu mẫu của biểu mẫu được liên kết khi được nhấp vào

Như bạn có thể thấy, chúng tôi đã sử dụng một số lớp Bootstrap (d-flex flex-column align-items-center) trên div ngoài cùng của chúng tôi để áp dụng một số kiểu dáng cơ bản. Kiểu này xuất phát từ biểu định kiểu mà chúng tôi đã nhập trong Ứng dụng. js

‍

Kết xuất thành phần biểu mẫu

Nhập thành phần EmailForm của bạn vào Ứng dụng. js và hiển thị nó giữa các div

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { EmailForm } from './EmailForm';
 
function App() {
 return (
   

     
   
 );
}
 
export default App;

và quay lại http. //máy chủ cục bộ. 3000 để xem biểu mẫu mới được hiển thị của chúng tôi

‍

‍

Tại thời điểm này, chúng tôi sẽ nhận được một số xác thực email cơ bản ngay lập tức. Hãy thử nhập địa chỉ email không hợp lệ vào mục nhập và nhấn nút “Gửi biểu mẫu”

‍

‍

React Bootstrap đã phát hiện ra rằng địa chỉ email thiếu một ký tự mong đợi và đưa ra thông báo lỗi

Xác thực với AbstractAPI

Mức độ xác nhận đó là tuyệt vời, nhưng nếu chúng ta muốn thứ gì đó mạnh mẽ hơn một chút thì sao?

Điều này không chỉ cho chúng ta biết rằng chuỗi đầu vào của người dùng chứa tất cả các ký tự mong muốn cho một email được định dạng đúng mà còn cho biết email đó có thực sự tồn tại hay không

Hãy thêm một bước xác thực để kiểm tra đầu vào email dựa trên AbstractAPI trước khi chúng tôi gửi nó

Bắt đầu với API

Trước tiên, hãy thiết lập khóa API. Bạn sẽ cần một khóa API để sử dụng bất kỳ điểm cuối nào của AbstractAPI. Mỗi API yêu cầu một khóa duy nhất, vì vậy ngay cả khi bạn đã sử dụng API AbstractAPI trước đó, bạn sẽ cần một khóa mới cho khóa này

Điều hướng đến trang chủ Email API và nhấp vào “Bắt đầu. ”

Nếu bạn chưa từng sử dụng Tóm tắt trước đây, bạn sẽ được yêu cầu tạo một tài khoản bằng email và mật khẩu của mình. Đừng lo—bạn sẽ không bị tính phí cho bất cứ điều gì. Tất cả các điểm cuối của AbstractAPI đều được sử dụng miễn phí để phát triển

Khi bạn đã tạo tài khoản và đăng nhập, bạn sẽ truy cập trang chủ API nơi bạn sẽ thấy khóa API của mình, cùng với liên kết đến tài liệu, hộp cát để thực hiện yêu cầu kiểm tra và thông tin hỗ trợ.  

Sao chép khóa API của bạn. Chúng ta sẽ sử dụng nó trong bước tiếp theo

Thêm logic biểu mẫu tùy chỉnh

Ngay bây giờ, Bootstrap đang xử lý tất cả logic biểu mẫu cho chúng tôi. Để xác thực email của bạn bằng API trừu tượng, chúng tôi cần lưu trữ email ở đâu đó trong trạng thái. Chúng tôi cũng cần thêm trình xử lý onChange để cập nhật trạng thái khi người dùng nhập email của họ và trình xử lý onSubmit để thực hiện xác thực bổ sung khi người dùng nhấp vào “Gửi biểu mẫu. ”

Biểu mẫu Email bên trong. js, hãy tạo một hàm gọi là sendValidationRequest. Điều này sẽ xử lý việc lấy email mà người dùng của chúng tôi đã nhập

...// other imports omitted
import { useState } from "react";
 
export const EmailForm = () => {
 
   const [email, setEmail] = useState('');
 
   const handleInputEmail = (event) => {
       setEmail(event.target.value);
   }
 
   const handleSubmitEmail = () => {
       console.log("SUBMITTED! ", email);
   }
  
   return (

       

           
               Enter Your Email
               
           
           Submit Form
       
   
)
}

Trong cuộc sống thực, trình xử lý thư handleSubmit sẽ gửi email đến chương trình phụ trợ của bạn. Với mục đích của hướng dẫn này, chúng tôi sẽ chỉ đăng nhập email vào bảng điều khiển

Tiếp theo, chúng ta cần thêm bước xác thực vào hàm handleSubmitEmail của mình

Gửi yêu cầu xác thực

Để xác thực email với AbstractAPI, trước tiên chúng tôi cần gửi email tới API. Để làm điều đó, chúng tôi sẽ cần một ứng dụng khách HTTP. React đi kèm với ứng dụng tìm nạp được tích hợp sẵn và nó có sẵn dưới dạng biến toàn cục. Gói NPM axios là một giải pháp thay thế dễ sử dụng khác. Hiện tại, chúng tôi sẽ sử dụng tìm nạp

Tiếp theo, tạo URL nơi tìm nạp sẽ gửi yêu cầu. Theo tài liệu Tóm tắtAPI, URL cần bao gồm khóa API của chúng tôi và email chúng tôi muốn xác thực

const API_KEY = "YOUR_API_KEY";
const apiURL = "https://emailvalidation.abstractapi.com/v1/?api_key=" + API_KEY;

Ngay bây giờ, chúng tôi không bao gồm email vì chúng tôi chưa biết nó là gì. Email sẽ được thêm vào URL sau khi người dùng nhập và trước khi chúng tôi gửi yêu cầu

Tạo một chức năng gọi là sendEmailValidationRequest. Đây là nơi chúng tôi sẽ kéo email của mình ra khỏi trạng thái và gửi nó tới API để xác thực.  

   const sendEmailValidationRequest = async () => {
       const fullURL = apiURL + email;
       const validationResponse = await (await fetch(fullURL)).json();
       console.log(validationResponse);
   }

validationResponse sẽ chứa đối tượng JSON mà điểm cuối AbstractAPI gửi lại. Lưu ý rằng chúng ta đã sử dụng await hai lần để truy cập đối tượng JSON bên trong phản hồi. một lần để chờ phản hồi từ mạng và một lần nữa để phân tích phản hồi thành JSON

Đối tượng JSON sẽ chứa thông tin về việc email của chúng ta có hợp lệ hay không, cùng với các thông tin khác. Nó sẽ trông giống như thế này

________số 8

Hãy thêm hàm sendValidationRequest làm bước đầu tiên trong hàm handleSubmit của chúng ta

   const handleSubmitEmail = async () => {
       await sendEmailValidationRequest();
       console.log("SUBMITTED! ", email)
   }

Tiếp theo, chúng tôi cần kiểm tra phản hồi của API và sử dụng nó để xác định xem chúng tôi có nên gửi email hay không

Sử dụng Phản hồi API trong Xác thực biểu mẫu

Phần quan trọng nhất của phản hồi API JSON là đối tượng is_valid_format, chứa trường giá trị boolean. Trường này sẽ cho chúng tôi biết email có được định dạng đúng hay không. Chúng tôi chỉ muốn gửi email nếu trường này là “true. ”

Hãy trả về giá trị của trường này từ hàm sendValidationRequest của chúng ta và thêm một số logic có điều kiện để kiểm tra giá trị của nó bên trong handleSubmitEmail

$ npm start

Tuyệt quá. Chúng tôi đã xác thực thành công một email và sử dụng tính hợp lệ của email đó để xác định xem có gửi email đó đến cơ sở dữ liệu của chúng tôi hay không

Tiếp theo, chúng tôi cần cho người dùng biết email của họ có hợp lệ hay không. Chúng ta có thể sử dụng React Bootstrap Form Control Feedback component để làm điều này

Hiển thị thông báo lỗi

Nếu email không hợp lệ, chúng tôi cần thông báo cho người dùng biết. Chúng tôi sẽ thêm một thành phần Phản hồi có thông báo lỗi nếu is_valid_format. phản hồi giá trị từ API trở lại "false. ”

Trước tiên, chúng ta cần tạo một giá trị trong trạng thái để giữ thông báo lỗi của mình

$ npm start

Như bạn có thể thấy, chúng tôi đang khởi tạo giá trị lỗi thành một đối tượng thay vì một chuỗi. Tại sao? . Chúng ta sẽ nói thêm về điều này trong giây lát

Tiếp theo, kết xuất thành phần Phản hồi điều khiển biểu mẫu bên dưới thành phần Điều khiển biểu mẫu

$ npm start

Thành phần này sẽ chỉ hiển thị phản hồi cho người dùng nếu đối tượng lỗi có trường email không phải là “null. ” Nó cũng sẽ hiển thị bất kỳ chuỗi nào có trong lỗi. trường email.  

Để kết nối nó với thành phần Kiểm soát biểu mẫu email của chúng tôi, chúng tôi cần sử dụng trường isInvalid trên Kiểm soát biểu mẫu

$ npm start

Hãy thêm logic để hiển thị thông báo lỗi

$ npm start

Tại đây, nếu phản hồi từ API cho biết email không hợp lệ, chúng tôi sẽ thêm một trường email vào đối tượng lỗi và điền vào đó thông báo lỗi mà chúng tôi muốn hiển thị cho người dùng của mình. Nếu phản hồi hợp lệ, chúng tôi sẽ xóa mọi lỗi email có thể đã được hiển thị trước đó và gửi email

Quay lại http. //máy chủ cục bộ. 3000 và cố gắng gửi một email không hợp lệ

‍

‍

Ghi chú. AbsctractAPI thực hiện một số nội dung thông minh với tính năng tự động sửa lỗi. Ví dụ: nếu người dùng nhập một email như “test@gmail”, Tóm tắt sẽ tự động sửa email thành “test@gmail. com” và trả lại rằng email hợp lệ.  

Để tất cả chúng cùng nhau

Đây là những gì EmailForm của chúng tôi. js sẽ trông như thế nào khi tất cả được nói và thực hiện

$ npm start

Đó là tất cả những gì cần thiết để thiết lập và chạy biểu mẫu xác thực email cơ bản với AbstractAPI

Sự kết luận

Vẫn còn nhiều điều có thể được cải thiện ở đây.  

Đối với người mới bắt đầu, chúng tôi không xử lý các lỗi có thể phát sinh do lỗi mạng (404, 500, v.v. ) hoặc các sự cố khác có thể xảy ra khi cố gắng gửi yêu cầu đến điểm cuối API

Tiếp theo, chúng tôi có thể thêm một công cụ tải khi người dùng nhấn “Gửi biểu mẫu” và tắt nút “Gửi biểu mẫu” để cho người dùng biết rằng có điều gì đó đang xảy ra và ngăn người dùng nhấp vào nút nhiều lần

Cuối cùng, chúng ta có thể kết nối chức năng xác thực biểu mẫu để được gọi trong trình xử lý onBlur để email được xác thực trước khi người dùng nhấn gửi. Chúng tôi cũng có thể đặt nó trong trình xử lý onChange nếu chúng tôi muốn xác thực ở mỗi lần nhấn phím (điều này cũng sẽ yêu cầu chúng tôi gỡ lỗi yêu cầu. )

Nhưng hiện tại, chúng tôi đã có một khởi đầu khá tốt trong việc xác thực biểu mẫu cho email

câu hỏi thường gặp

Phản ứng Bootstrap là gì?

React Bootstrap là một thư viện thành phần kết hợp các thành phần kiểu dáng và có thể tái sử dụng của Bootstrap thành các thành phần React thuần túy. Nó cho phép Bootstrap tích hợp liền mạch với DOM ảo của React, thay vì dựa vào JQuery để thực hiện cập nhật DOM

Sự khác biệt giữa Bootstrap và React Bootstrap là gì?

Bootstrap là một khung JavaScript, được Twitter phát hành vào năm 2011. Đây là một trong những thư viện phổ biến nhất dành cho Javascript, với hơn 2. 5 triệu lượt tải xuống mỗi tuần. Bootstrap trước hết là một khung CSS cho phép bạn áp dụng các lớp được xác định trước cho các phần tử DOM, sau đó tổ chức và định kiểu các phần tử đó cho bạn. Nó cũng xuất một số thành phần được tạo sẵn có thể được sử dụng bên trong ứng dụng web của bạn

React Bootstrap lấy các kiểu được xác định trước của Bootstrap và gộp chúng thành các thành phần React có thể tái sử dụng. Bạn có thể nhập các thành phần này vào ứng dụng của mình. Vanilla Bootstrap không chơi tốt với React vì sử dụng JQuery, điều khiển DOM. React dựa vào bóng hoặc DOM ảo để thực hiện cập nhật, vì vậy các thay đổi Bootstrap được áp dụng cho DOM không được React chọn

Xác thực mẫu là gì?

Xác thực biểu mẫu là một phần quan trọng của phát triển web và di động frontend. Đó là quá trình đảm bảo rằng thông tin đầu vào mà người dùng cung cấp cho bạn là chính xác và đúng định dạng. Ví dụ: một biểu mẫu xác thực email sẽ kiểm tra xem email được cung cấp có chứa tất cả các ký tự mong muốn hay không (như '@' và '. com’) và nó không chứa bất kỳ ký tự không mong muốn hoặc tập lệnh độc hại nào

Xác thực biểu mẫu không chỉ ngăn người dùng của bạn nhập sai thông tin mà còn bảo vệ họ và hệ thống của bạn khỏi các cuộc tấn công từ những kẻ xấu