Xác thực biểu mẫu nâng cao trong javascript

Question

Làm việc với các biểu mẫu là công việc hàng ngày của hầu hết mọi nhà phát triển web. Bất kể bạn tạo trang web nào, nó sẽ sử dụng biểu mẫu. Xác thực dữ liệu biểu mẫu ở phía máy khách là một tính năng tuyệt vời khi nói đến trải nghiệm người dùng. Trong hướng dẫn này, chúng ta sẽ tạo một xác thực biểu mẫu đơn giản bằng javascript

Nội dung chính Show

Video hướng dẫn
Nơi bạn có thể học hỏi thêm từ tôi?

Mặc dù xác thực biểu mẫu phía máy khách mang lại trải nghiệm người dùng tốt, nhưng nó có thể bị lừa và bỏ qua rất dễ dàng. Để ngăn việc sử dụng có mục đích xấu, bạn phải luôn xác thực dữ liệu biểu mẫu ở phía máy chủ

Video hướng dẫn

Thay vào đó, nếu bạn muốn xem video chi tiết từng bước, bạn có thể xem video tôi đã thực hiện về dự án này trên Kênh Youtube của tôi

HTML

Hãy bắt đầu với đánh dấu HTML. Chúng tôi sẽ có một div

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

5, mà chúng tôi sẽ sử dụng để định vị và tạo kiểu cho biểu mẫu của chúng tôi. Bên trong đó, không ngạc nhiên, chúng tôi sẽ tạo một

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

6, chúng tôi cũng đặt một

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

7 cho nó và đặt

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

8 thành

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

9 vì chúng tôi không thực sự muốn gửi biểu mẫu này

Chúng tôi sẽ tạo bốn trường nhập, cho tên người dùng, email, mật khẩu và xác nhận mật khẩu. Đối với mục đích tạo kiểu và kiểm soát, chúng tôi sẽ bọc các thẻ

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

0 này thành các thẻ

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

1 với lớp

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

2. Mỗi điều khiển đầu vào này sẽ chứa một

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

3, một

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

0 và một

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

1 với lớp

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

6. Mọi đầu vào phải có thuộc tính id và name. Nhãn phải có thuộc tính

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

7 phù hợp với thuộc tính tên của thẻ đầu vào tương ứng. Đối với loại đầu vào, chúng tôi sẽ sử dụng

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

8 cho tên người dùng và email và sử dụng

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

9 cho mật khẩu và xác nhận mật khẩu. Div với lớp

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

6 sẽ giữ các thông báo lỗi cho trường nhập liệu cụ thể. Bây giờ nó sẽ trống, chúng tôi sẽ sửa đổi nó từ javascript

Cuối cùng, chúng ta phải thêm một nút để "gửi" biểu mẫu của mình. Trong ví dụ này, chúng tôi sẽ không thực sự gửi biểu mẫu mà chỉ mô phỏng nó. Đối với nút gửi, tôi sẽ sử dụng một nút có loại

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

61

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đó là đánh dấu HTML mà chúng tôi cần cho biểu mẫu của mình. Hãy tạo kiểu cho nó một chút với CSS

CSS

Chúng tôi sẽ cung cấp một thiết kế rộng rãi, sạch sẽ đơn giản cho hướng dẫn này. Tôi sẽ đặt một dải màu tuyến tính làm nền và tôi sẽ sử dụng phông chữ google tùy chỉnh mà bạn có thể cài đặt từ đây

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sẽ cố định chiều rộng cho biểu mẫu của mình và căn giữa nó với các lề, tôi cũng sẽ tạo cho nó một lề trên để di chuyển nó xuống một chút theo chiều dọc. Để có thêm không gian, chúng tôi áp dụng 20px phần đệm. Chúng tôi sẽ đặt kích thước phông chữ cố định, màu nền sáng và cũng đặt bán kính đường viền để có các góc tròn

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với tiêu đề biểu mẫu, chúng tôi sẽ sử dụng màu văn bản tối và căn giữa nó theo chiều ngang bằng cách sử dụng

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

62. Nút gửi phải nổi bật vì vậy chúng tôi sẽ sử dụng màu nền xanh và màu văn bản màu trắng. Chúng tôi cũng xóa các đường viền mặc định của trình duyệt và cung cấp cho nó một chút bán kính đường viền. Chúng tôi sẽ cung cấp cho nó một khoảng cách nhỏ với phần đệm và lề, đồng thời làm cho nó có chiều rộng đầy đủ bằng cách áp dụng 100% chiều rộng

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để có các đầu vào xếp chồng lên nhau, chúng tôi sẽ sử dụng flexbox. Để làm điều đó, chúng tôi sẽ đặt

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

63 và

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

64. Đối với đầu vào, chúng tôi sẽ đặt đường viền màu xám, với bán kính đường viền nhỏ. Chúng tôi sẽ đặt thuộc tính hiển thị thành

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

65 và làm cho chúng có chiều rộng đầy đủ bằng cách áp dụng chiều rộng 100%. Chúng tôi cũng sẽ đặt một phần đệm nhỏ, vì vậy nó sẽ rộng rãi hơn. Tôi cũng sẽ xóa đường viền khi đầu vào được lấy nét bằng cách đặt

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

66

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sẽ sử dụng hai lớp ("thành công" và "lỗi") để đưa ra phản hồi trực quan cho người dùng về việc giá trị của đầu vào có hợp lệ hay không. Chúng tôi sẽ áp dụng các lớp này từ javascript cho div điều khiển đầu vào chứa trường đầu vào cụ thể. Khi có lớp thành công, chúng tôi sẽ đặt màu viền xanh lục, nếu không, nếu có lỗi, chúng tôi sẽ sử dụng màu viền đỏ thay thế. Đối với lỗi div, chúng tôi sẽ sử dụng cỡ chữ nhỏ hơn và màu đỏ để hiển thị thông báo lỗi

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Hãy thực hiện xác thực trong javascript tiếp theo

Javascript

Điều đầu tiên chúng ta phải làm là lưu các tham chiếu cho biểu mẫu và các trường nhập liệu. Vì chúng tôi có id cho mọi đầu vào và biểu mẫu, chúng tôi có thể dễ dàng thực hiện bằng cách sử dụng ________ 167

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để ngăn biểu mẫu tự động gửi, chúng tôi phải đính kèm và trình xử lý sự kiện vào sự kiện

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

61 của biểu mẫu của chúng tôi. Trong hàm xử lý sự kiện này, chúng ta phải gọi hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

69 để ngăn biểu mẫu gửi tự động. Thay vì gửi, chúng tôi sẽ gọi hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

60, hàm này sẽ xác thực các đầu vào và nếu muốn, chúng tôi có thể gửi biểu mẫu vào đó sau mỗi lần kiểm tra, nhưng chúng tôi sẽ không làm điều đó trong hướng dẫn này. Chúng tôi sẽ sớm tạo

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

60 này

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng ta cũng sẽ tạo hai hàm trợ giúp.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

62,

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

63. Chúng tôi sẽ sử dụng các chức năng trợ giúp này để đặt lỗi hoặc trạng thái thành công của các điều khiển đầu vào. Hãy bắt đầu với setError một. Nó nhận hai tham số.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

64 và

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

65. Phần tử sẽ là phần tử đầu vào nằm trong điều khiển đầu vào cụ thể. Vì vậy, trước tiên chúng ta phải lấy div cha kiểm soát đầu vào. Chúng tôi sẽ lưu nó vào biến

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

66 và lấy div điều khiển đầu vào bằng cách sử dụng thuộc tính

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

67 của phần tử đầu vào. Tiếp theo, chúng ta phải thu thập lỗi div và lưu nó vào một biến. Chúng ta có thể làm điều đó bằng cách truy vấn điều khiển đầu vào với lớp lỗi.
Bây giờ, chúng ta phải đặt nội dung của div lỗi thành thông báo mà chúng ta nhận được trong các tham số và xóa lớp

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

68 khỏi điều khiển đầu vào (nếu có) và thêm lớp lỗi.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Phương thức setSuccess sẽ thực sự giống nhau. Sự khác biệt đầu tiên là nó sẽ không nhận được thông báo dưới dạng tham số. Chúng ta phải xóa hiển thị lỗi bằng cách đặt văn bản bên trong của nó thành một chuỗi trống. Cuối cùng, chúng ta phải đảo ngược ứng dụng lớp. Chúng ta sẽ thêm lớp

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

68 vào inputControl và xóa lớp

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

6 (nếu có)

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi sẽ tạo một chức năng trợ giúp cuối cùng để xác thực email. Đây là một bước tùy chọn, nếu bạn không muốn sử dụng các biểu thức thông thường, vui lòng chỉ đặt loại đầu vào của trường email thành

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

71. Hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

72 sẽ lấy một chuỗi làm tham số và sử dụng biểu thức chính quy có vẻ kỳ lạ này để kiểm tra xem đó có phải là một email hợp lệ hay không. Chúng tôi sẽ sử dụng hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

73 để kiểm tra chuỗi dựa trên biểu thức chính quy. Chúng tôi cũng sẽ chuyển đổi email thành một chuỗi và viết thường

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng ta nên tạo hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

60 của trình xác thực. Đầu tiên chúng ta sẽ lấy giá trị của tất cả các trường đầu vào. Chúng ta có thể làm điều đó bằng cách lấy giá trị của thuộc tính giá trị của tham chiếu trường đầu vào. Chúng ta sẽ gọi hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

75 để xóa các khoảng trống ở cuối (nếu có) ở đầu và cuối của các giá trị.
Sau đó, chúng ta có thể bắt đầu xác thực đầu vào. Chúng tôi sẽ sử dụng câu lệnh

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

76 để thực hiện xác thực. Đối với tên người dùng, chúng tôi sẽ kiểm tra xem nó có trống hay không, bằng cách so sánh giá trị với một chuỗi trống. Nếu nó trống, chúng tôi sẽ gọi hàm

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

62 và cung cấp phần tử tên người dùng cho nó, kèm theo thông báo lỗi của chúng tôi. Nếu không, chúng ta sẽ gọi phương thức

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

63 với phần tử tên người dùng. Bây giờ chúng ta phải làm điều này cho các trường đầu vào khác, nhưng cách tiếp cận sẽ giống nhau.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với email, chúng tôi sẽ kiểm tra xem nó có được cung cấp hay không và đặt lỗi nếu nó trống. Nếu nó không trống, chúng tôi sẽ kiểm tra xem đó có phải là địa chỉ email hợp lệ hay không và nếu không, chúng tôi sẽ đặt lỗi, nếu không, chúng tôi sẽ đặt thành công cho trường

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với mật khẩu, chúng tôi sẽ kiểm tra xem nó có trống hay không và nếu nó không trống, chúng tôi sẽ kiểm tra xem nó có dài hơn 7 ký tự không. Nếu không, hãy đặt lỗi, nếu không, chúng tôi sẽ đặt thành công

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đối với xác nhận mật khẩu, chúng tôi sẽ kiểm tra xem nó có trống không và chúng tôi cũng nên kiểm tra xem giá trị của xác nhận mật khẩu có bằng giá trị của mật khẩu không

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ chúng tôi đã xác thực mọi đầu vào, nếu muốn, chúng tôi có thể gửi biểu mẫu của mình ngay bây giờ đến một điểm cuối cụ thể

Làm tốt lắm, bây giờ bạn đã có Javascript xác thực biểu mẫu đang hoạt động. Xin lưu ý rằng bạn luôn phải xác thực các đầu vào biểu mẫu ở phía máy chủ vì có thể dễ dàng bỏ qua xác thực phía máy khách. Có nhiều phương thức và thư viện xác thực biểu mẫu nâng cao hơn mà chúng tôi sử dụng trong phát triển web hiện đại, nhưng dự án này là một cách thực sự tốt để bắt đầu và tìm hiểu các nguyên tắc cơ bản

Nơi bạn có thể học hỏi thêm từ tôi?

Tôi tạo nội dung giáo dục về phát triển web trên một số nền tảng, vui lòng 👀 kiểm tra chúng

Tôi cũng tạo một bản tin nơi tôi chia sẻ nội dung giáo dục của tuần hoặc 2 tuần mà tôi đã tạo. Không có bò💩 chỉ có nội dung giáo dục

programming javascript

Xác thực biểu mẫu nâng cao trong javascript

Video hướng dẫn

HTML

CSS

Javascript

Nơi bạn có thể học hỏi thêm từ tôi?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội