Ví dụ về xác thực biểu mẫu cơ bản trong JavaScript là gì?

JavaScript là một trợ giúp lớn khi chấp nhận dữ liệu ở dạng công khai trên các trang web;

Những gì chúng tôi sẽ tạo ra

Trong hướng dẫn này, chúng ta sẽ xây dựng một biểu mẫu đăng nhập đơn giản và thêm xác thực giao diện người dùng bằng vanilla JavaScript. Mục tiêu bao trùm là cung cấp phản hồi hữu ích cho người dùng cuối và đảm bảo dữ liệu được gửi là những gì chúng tôi muốn

thông tin

Hướng dẫn này được viết để người mới bắt đầu có thể làm theo—nhưng một số kiến ​​thức JavaScript cơ bản và hiểu biết về các nguyên tắc viết mã chắc chắn sẽ hữu ích

Bản trình diễn trực tiếp về Xác thực biểu mẫu JavaScript của chúng tôi

Kiểm tra bút bên dưới để kiểm tra xác thực biểu mẫu JavaScript của chúng tôi—phân nhánh nó, vui lòng sao chép các đoạn mã và làm theo hướng dẫn để xem nó được tạo như thế nào

Tại sao JavaScript hiện đại hoạt động đủ tốt

Nhờ những tiến bộ gần đây trong JavaScript, chúng tôi có thể tự tin sử dụng JavaScript hiện đại để thực hiện xác thực biểu mẫu mà không có bất kỳ sự phụ thuộc nào

Tuy nhiên, một số khung ngoài tự nhiên đơn giản hóa chiến lược xác thực. Chúng tôi sẽ không sử dụng bất kỳ phụ thuộc nào cho hướng dẫn này để làm cho mọi thứ hoạt động

Điều đáng nói là trong nhiều tình huống, HTML5 có các xác thực tích hợp sẵn có thể hoạt động đủ tốt cho các dự án của bạn. Chúng có thể hữu ích nếu bạn không quan tâm đến việc tạo xác thực tùy chỉnh của mình hoặc không có thêm thời gian. Hướng dẫn này sẽ tận dụng lộ trình tùy chỉnh để làm cho trải nghiệm có thương hiệu hơn

• Xác thực biểu mẫu HTML5 với thuộc tính “pattern”

  Thoriq Firdaus

  21 Th04 2021

1. Thêm đánh dấu

Bắt đầu với HTML, tôi đã tạo một biểu mẫu tạo tài khoản đơn giản được hiển thị ở giữa trang. Biểu mẫu có bốn trường đầu vào [tên người dùng, email, mật khẩu, xác nhận mật khẩu] và nút gửi đầu vào

Trong đánh dấu, chúng tôi sẽ thêm một số yếu tố bổ sung để cung cấp phản hồi xác thực cho người dùng cuối. Chúng bao gồm một số biểu tượng SVG [có nguồn gốc từ heroons. com và một số thẻ

5

12 trống. Đây là những hướng dẫn có thể thực hiện được nếu một trường không vượt qua xác thực

1

2

  Create a new account

3

4

5

      Username

0

1

2

3

4

5

6

7

8

9

2

0

2

1

2

2

2

4

2

5

2

6

2

7

2

8

3

  Create a new account

0

  Create a new account

1

  Create a new account

2

  Create a new account

3

8

  Create a new account

5

2

0

  Create a new account

7

  Create a new account

8

3

0

3

1

3

2

3

3

3

4

3

3

6

  Create a new account

1

3

8

3

9

8

1

2

0

3

4

6

7

8________6

Những điều cần lưu ý vào thời điểm này

• Mỗi trường đầu vào được nhóm trong phần tử

  5

  13 với lớp là

  5

  14. Chúng tôi sẽ sử dụng CSS để thêm một số khoảng trống giữa mỗi trường. Trong mỗi nhóm, chúng tôi có một tập hợp các biểu tượng SVG, trường nhịp và trường đầu vào. Chúng tôi sẽ sử dụng các biểu tượng SVG để cung cấp gợi ý trực quan cho dù đầu vào hợp lệ hay không hợp lệ
• Ban đầu, chúng tôi sẽ sử dụng CSS để ẩn từng biểu tượng khỏi chế độ xem. Sau đó, chúng tôi có thể tận dụng JavaScript để ẩn và hiển thị chúng so với đầu vào của người dùng
• Tôi cũng có kế hoạch hiển thị một thông báo hữu ích trong thẻ

  5

  15 với lớp

  5

  16 nếu các xác thực của biểu mẫu được kích hoạt để thực thi. Có một thẻ

  5

  15 duy nhất cho mỗi nhóm đầu vào
• Cuối cùng, lưu ý rằng mỗi đầu vào có một id được gán. Thuộc tính id rất quan trọng đối với phần JavaScript của hướng dẫn

2. Tạo kiểu cho biểu mẫu bằng CSS

Để làm cho biểu mẫu dễ sử dụng và dễ truy cập hơn, chúng tôi sẽ thêm một số CSS

Tôi đã liên kết với Google Fonts Specimen có tên là Inter [mà bạn có thể nhận ra từ Tuts+]. Đó là một phông chữ sans-serif tuyệt vời có thể thích ứng với nhiều trường hợp sử dụng

Nếu bạn đang sử dụng CodePen và làm theo, bạn có thể tìm thấy phông chữ của chúng tôi được liên kết trong tùy chọn thẻ

5

18 bên trong khung HTML của trình chỉnh sửa

CSS tương đối đơn giản. Chúng tôi đang sử dụng CSS để ẩn tất cả các biểu tượng trong lần tải đầu tiên và sắp tới chúng tôi sẽ chuyển đổi trạng thái của chúng bằng JavaScript

1

5

1

2

5

3

3

5

5

4

5

5

8

0

      Username

0

2

5

5

4

6

      Username

5

7

      Username

7

9

5

5

2

1

2

2

02

2

4

04

2

6

5

5

2

8

  Create a new account

0

09

  Create a new account

2

11

  Create a new account

3

13

  Create a new account

5

15

  Create a new account

7

17

  Create a new account

8

19

3

0

21

3

2

23

3

4

5

5

3

6

3

8

28

3

9

30

1

5

5

3

4

35

6

37__

3. Cắm JavaScript

Bây giờ đến phần trình bày tính năng. Thêm JavaScript là những gì sẽ tạo ra hoặc phá vỡ biểu mẫu này

Tôi đã đề cập đến một vài mục tiêu trước đây, nhưng đây là toàn bộ danh sách trong một dàn ý

• Đảm bảo dữ liệu chính xác được nhập vào từng trường
• Hiển thị phản hồi hữu ích nếu trường hợp lệ hoặc không hợp lệ
• Không cho phép gửi biểu mẫu nếu bất kỳ trường nào không hợp lệ
• Xác thực biểu mẫu trong thời gian thực khi người dùng nhập hoặc nhấp vào Tạo tài khoản

suy nghĩ mô-đun

Với sự khởi đầu của ES6 và hỗ trợ thêm JavaScript trong các trình duyệt hiện đại, chúng tôi có thể tận dụng một số tính năng mới hơn cho phép mã chúng tôi viết có thể tái sử dụng nhiều hơn

Với ý nghĩ đó, tôi sẽ sử dụng mẫu

5

19 của JavaScript và tạo một Lớp mới có thể được sử dụng cho các biểu mẫu trong tương lai nếu cần

Các mẫu này bắt nguồn từ các khái niệm lập trình phụ trợ, tuy nhiên, trong JavaScript, nó được khai thác nhiều hơn vì JavaScript không phải là ngôn ngữ lập trình truyền thống. Tôi khuyên bạn nên đọc thêm về hoạt động bên trong của các lớp và hàm tạo nếu bạn muốn hiểu thêm đằng sau cách chúng hoạt động

Tôi nên đề cập rằng mã cuối cùng không phải là mô-đun 100%, nhưng ý tưởng là thay đổi nó theo cách đó càng nhiều càng tốt. Khi ứng dụng hoặc trang web của bạn mở rộng quy mô, bạn nên giải trí với ý tưởng về khung JavaScript vì các khung có xu hướng trích xuất logic lặp đi lặp lại. Những khung suy nghĩ này cho phép bạn sử dụng lại mã và giữ mọi thứ ngăn nắp hơn

Bắt đầu với một lớp học mới

Để bắt đầu, chúng ta sẽ tạo một lớp mới tên là

5

20

1

2

82

Chúng tôi sẽ thêm một hàm

5

21 bên trong lớp và chấp nhận hai đối số. Bạn có thể coi chức năng này là chức năng bạn nhận được miễn phí với bất kỳ lớp nào trong JavaScript. Ý tưởng là có thể gọi lớp sau này ở một nơi khác và chuyển các đối số để sử dụng lại. Điều đó có thể chưa rõ ràng 100%, nhưng khi chúng tôi tiến bộ, điều đó sẽ có ý nghĩa hơn

1

2

84

2

2

86

3

___

2

88

4

3_______90

5

3_______92

0

5

5

Chúng ta sẽ khởi tạo các giá trị mới cho các thể hiện trong lớp

5

20 bên trong hàm

5

19. Các giá trị này cho phép chúng ta sử dụng chúng ở bất cứ đâu trong phạm vi của lớp, nhờ vào từ khóa

5

24. Trong trường hợp này,

5

24 đề cập đến lớp có phạm vi

5

20, nhưng

5

24 luôn có thể thay đổi dựa trên phạm vi của nó

Hàm

5

21 khởi tạo một biểu mẫu và các trường trong biểu mẫu. Mục tiêu của tôi là yêu cầu

5

20 trích xuất logic, vì vậy tất cả những gì chúng ta phải làm là chuyển các tham chiếu đến một biểu mẫu đã cho và trường của biểu mẫu đó theo số nhận dạng hoặc tên của chúng. Điều đó sẽ có ý nghĩa hơn trong một chút

Phần tử biểu mẫu mục tiêu

Tiếp theo, tôi sẽ tạo một số biến truy vấn

5

30 cho các phần tử mà chúng tôi sẽ nhắm mục tiêu. Tất nhiên, những thứ đó bao gồm biểu mẫu và các trường của nó

Với những thứ đó, chúng tôi có thể thiết lập một phiên bản mới của lớp

5

20 của chúng tôi

1

2

96

2

2

98

3

4

  Create a new account

01

Biến

5

32 chịu trách nhiệm truy vấn

5

30 để tìm phần tử biểu mẫu trên trang có lớp là

5

34. Biến

5

35 là một mảng các tên được tham chiếu bởi thuộc tính

5

36 của mỗi trường biểu mẫu. Tên trong HTML của bạn phải khớp với nội dung của các giá trị mảng để nhắm mục tiêu phù hợp. Chúng tôi sẽ sử dụng các giá trị mảng bên trong lớp

5

20 để truy vấn từng trường khi cần thiết

Biến

5

38 là tham chiếu của chúng ta đến một thể hiện mới của lớp

5

20. Chúng tôi chuyển vào các biến

5

32 và

5

35 để khởi tạo các biến đó bên trong lớp để sử dụng bất cứ nơi nào chúng tôi cần

Tại thời điểm này, không có gì được gọi từ lớp, vì vậy chúng tôi cần thêm một số mã để khởi động hành động đó

1

2

84

2

2

86

3

2

88

4

2

90

5

2

92

0

2

  Create a new account

14

4

  Create a new account

16

6

2

92

7

5

5

9

2

1

  Create a new account

23

2

2

2

98

2

4

2

6

  Create a new account

01

2

8

  Create a new account

0

  Create a new account

31

Tôi đã thêm một hàm

5

42 vào lớp

5

20 bên dưới hàm

5

19. Bạn có thể đặt tên cho chức năng này theo bất cứ điều gì bạn muốn, nhưng tôi thường sử dụng ____________42 làm tùy chọn

Bên trong hàm

5

42, tôi đã viết một câu lệnh

5

47 đơn giản và chuyển vào các giá trị mà chúng tôi đã thiết lập trong hàm

5

19. Nếu mọi việc suôn sẻ, điều này sẽ ghi lại phiên bản biểu mẫu của chúng tôi và mảng id trường mà tôi đã đề cập trước đó

Ở cuối tệp, tôi đang gọi trực tiếp hàm

5

49

1

  Create a new account

31

Điều đó sẽ ghi lại một cái gì đó như sau trong bảng điều khiển của trình duyệt của bạn

Sự thành công. Chúng tôi biết mã cho đến nay là chính xác nhờ những giá trị đó xuất ra những gì chúng tôi mong đợi

4. Thêm xác thực biểu mẫu khi người dùng nhập

Lắng nghe thông tin đầu vào của người dùng sẽ giúp chúng tôi xác thực trước từng trường. Chúng ta có thể nối vào phương thức

5

50 của JavaScript để làm điều đó. Bạn có thể nghe nhiều sự kiện khác nhau và trong phần này, chúng tôi sẽ chú ý cụ thể đến sự kiện

5

51

Tôi sẽ tạo một hàm mới trong lớp có tên là

5

52

1

2

84

2

  Create a new account

37

3

4

  Create a new account

40

5

  Create a new account

42

0

  Create a new account

44

2

  Create a new account

46

4

6

  Create a new account

49

7

  Create a new account

51

9

  Create a new account

53

2

1

  Create a new account

55

2

2

  Create a new account

57

2

4

2

92

2

6

5

5

Rất nhiều trong vài dòng mã này có thể gây nhầm lẫn. Hãy để tôi giải thích chi tiết hơn

Hiểu Phạm vi

Đầu tiên, chúng ta tạo một biến tên là

5

53 và gán nó cho

5

24

Việc thiết lập biến này hoạt động như một cách để nhắm mục tiêu giá trị của

5

24 so với phạm vi của lớp bao trùm [

5

20] từ bên trong các phạm vi lồng nhau khác

Lý do tôi đưa vào biến

5

53 là để chúng ta có thể truy cập vào lớp lõi

5

20 bên trong phương thức

5

59 vì phạm vi thay đổi nếu bạn lồng bất kỳ mã nào vào bên trong hàm. Đọc thêm về Phạm vi trên MDN

Vòng qua

Để xác thực đúng từng trường, chúng ta sẽ cần lặp qua từng thuộc tính mảng bên trong biến

5

35 mà chúng ta đã thiết lập bằng cách sử dụng hàm

5

19. Mã xuất ra từng tên trường mà chúng tôi muốn nhắm mục tiêu bằng phương thức

5

62

Trong vòng lặp, chúng tôi sử dụng dấu ngược để tự động truy vấn tài liệu [

5

30] để tìm trường thích hợp được xác định bởi thuộc tính

5

36

Cuối cùng, chúng ta sử dụng từng trường động, gán nó cho một biến đầu vào và gọi hàm

5

59. Chúng tôi lắng nghe một sự kiện

5

51 và gọi một chức năng mới mà chúng tôi sẽ tạo có tên là

5

67. Hàm này chấp nhận một đầu vào duy nhất cho mục đích xác thực

Tôi đã chọn trích xuất logic xác thực thành một hàm mới có tên là

5

68 vì phần lớn mã có thể tái sử dụng. Việc xóa mã thành chức năng mới cũng hỗ trợ mức độ dễ đọc theo quan điểm của nhà phát triển

5. Xác thực từng trường

Để xác thực các trường biểu mẫu, chúng tôi sẽ cần một số câu lệnh có điều kiện cùng với một số chuông và còi để làm cho giao diện phản ứng trong thời gian thực

Trước khi chúng ta viết logic cho hàm

5

67, tôi sẽ viết một hàm khác chịu trách nhiệm về phần thiết kế. Chúng ta có thể sử dụng lại chức năng này sau, vì vậy sẽ rất hợp lý khi trích xuất nó thành một bộ logic duy nhất, mà tôi gọi là

5

70

1

2

84

2

  Create a new account

65

3

4

  Create a new account

40

5

  Create a new account

42

0

  Create a new account

44

2

  Create a new account

46

4

6

  Create a new account

49

7

  Create a new account

51

9

  Create a new account

53

2

1

  Create a new account

55

2

2

  Create a new account

57

2

4

2

92

2

6

2

8

  Create a new account

90

  Create a new account

0

  Create a new account

92

  Create a new account

2

2

92

  Create a new account

3

  Create a new account

5

  Create a new account

97

  Create a new account

7

  Create a new account

99

  Create a new account

8

3

01

3

0

3

03

3

2

3

4

3

06

3

6

3

08

3

8

3

10

3

9

3

12

1

3

14

3

3

16

4

6________5__

Hàm

5

70 chấp nhận ba tham số. trường chúng tôi đang nhắm mục tiêu, thông báo nếu cần và trạng thái xác thực

Bên trong hàm, chúng ta bắt đầu với ba biến.

5

72,

5

73 và

5

74

Nếu bạn còn nhớ, mỗi nhóm biểu mẫu có một tập hợp các thành phần này trong phần đánh dấu. Hai là biểu tượng SVG và biểu tượng còn lại là một

5

15 trống chịu trách nhiệm hiển thị nội dung văn bản nếu xác thực không thành công. Tham số

5

76 sẽ là cách mỗi biểu tượng lặp lại và thẻ

5

15 được nhắm mục tiêu tương ứng với vị trí của nó trong

5

30

Bên dưới các biến là hai câu lệnh điều kiện kiểm tra các giá trị chuỗi

5

79 mà chúng ta sẽ thêm vào hàm

5

67

Một câu lệnh kiểm tra trạng thái

5

81 và câu lệnh kia cho trạng thái

5

82 được biểu thị bằng tham số trạng thái được chuyển qua hàm

5

70

Trong mỗi điều kiện, bạn sẽ tìm thấy nhiều logic hơn để chuyển đổi các lớp biểu tượng và đặt lại thông báo lỗi thành bất kỳ thông báo nào được chuyển đến hàm

5

70. Tất cả logic trong mã này đều diễn ra trong thời gian thực khi người dùng nhập vào một trường

Đảm bảo các trường không trống

Với hàm

5

70 được tạo, giờ đây chúng ta có thể đưa nó vào sử dụng bằng cách thực hiện xác thực trên từng trường. Tùy thuộc vào biểu mẫu của bạn, bạn có thể yêu cầu xác thực duy nhất nếu bạn có các trường biểu mẫu riêng lẻ. Có thể bạn không muốn bất kỳ trường nào để trống chẳng hạn

Chúng tôi sẽ bắt đầu với mục tiêu đó và đảm bảo mỗi trường không trống

1

2

84

2

3

37

3

3

39

4

3

41

5

3

43

0

3

45

2

3

47

4

3

16

6

2

92

7

9

  Create a new account

97

2

1

3

56

2

2

2

92

2

4

5

5

Đoạn mã trên lấy đối số

5

76 và nhắm mục tiêu giá trị của nó. Sử dụng phương thức

5

87 trong JavaScript, chúng tôi có thể xóa mọi khoảng trắng và kiểm tra xem giá trị có phải là chuỗi rỗng không

Nếu đầu vào trống, chúng tôi sẽ sử dụng hàm

5

70 và chuyển trường, câu lệnh truy vấn để tìm thẻ khoảng thời gian

5

89 liên quan đến trường và trạng thái của

5

82

Nếu đầu vào không trống, chúng ta có thể sử dụng hàm

5

70 tương tự trong lớp

5

20 để hiển thị trạng thái thành công. Trạng thái này không cần thông báo nên chúng ta có thể chuyển

5

93 cho đối số

5

94

Đảm bảo địa chỉ email hợp lệ

Khi tạo xác thực biểu mẫu JavaScript của riêng bạn, việc kiểm tra các địa chỉ email hợp lệ tự nó là một nghệ thuật. Đây là cách chúng ta sẽ thực hiện

1

2

84

2

3

37

3

3

39

4

3

68

5

3

41

0

3

43

2

3

45

4

3

47

6

3

16

7

9

3

81

2

1

3

83

2

2

3

85

2

4

3

87

2

6

3

89

2

8

3

91

  Create a new account

0

3

93

  Create a new account

2

3

95

  Create a new account

3

3

16

  Create a new account

5

2

92

  Create a new account

7

  Create a new account

8

  Create a new account

97

3

0

3

56

3

2

2

92

3

4

5

5

Đầu tiên, chúng tôi sẽ đảm bảo loại trường được xác định bằng API JavaScript là loại email

Sau đó, chúng tôi sẽ tận dụng một số mẫu

5

95 để đảm bảo email được nhập phù hợp với mong đợi của chúng tôi. Phương thức

5

96 cho phép bạn chuyển vào một mẫu

5

95 để trả về một giá trị boolean [giá trị ____0_______98 hoặc

5

99] bằng cách “thử nghiệm” nó với giá trị đã cho

Nếu giá trị vượt trội, chúng tôi sẽ lại sử dụng hàm

5

70 để hiển thị phản hồi cho người dùng. Chúng tôi có thể tùy chỉnh giá trị

5

94 thành bất kỳ giá trị nào hợp lý để xác thực

Xác nhận mật khẩu

Cuối cùng nhưng không kém phần quan trọng là xác thực xác nhận mật khẩu. Mục tiêu là đảm bảo trường mật khẩu khớp với trường xác nhận mật khẩu và chúng tôi sẽ thực hiện việc này bằng cách so sánh cả hai giá trị

1

2

84

2

3

37

3

3

39

4

3

68

5

3

41

0

20

2

3

16

4

6

3

81

7

3

83

9

20

2

1

3

16

2

2

2

4

34

2

6

36

2

8

38

  Create a new account

0

  Create a new account

2

41

  Create a new account

3

43

  Create a new account

5

45

  Create a new account

7

47

  Create a new account

8

3

91

3

0

3

89

3

2

3

95

3

4

3

16

3

6

2

92

3

8

3

9

  Create a new account

97

1

3

56

3

2

92

4________0_

Chúng ta cần tiến thêm một bước để xác thực nhiều trường hợp cạnh cho trường xác nhận mật khẩu. Tất nhiên, xác nhận mật khẩu không thể là trường trống và chúng tôi cũng cần đảm bảo rằng nó khớp với giá trị trường nhập mật khẩu

Đối với mỗi trường hợp, chúng tôi hiển thị trạng thái phù hợp

6. Xác thực khi gửi

Xác thực biểu mẫu JavaScript của chúng tôi gần như hoàn tất. Nhưng chúng tôi vẫn chưa tính đến nút gửi, một phần quan trọng của chính biểu mẫu. Chúng ta sẽ cần lặp lại quy trình mà chúng ta đã thực hiện cho sự kiện

5

51 cho sự kiện

      Username

03 bằng cách sử dụng một hàm ________0____59 khác

Điều đó sẽ đến từ một chức năng khác mà tôi sẽ gọi là

      Username

05

1

2

84

2

3

37

3

72

4

  Create a new account

42

5

0

77

2

79

4

81

6

83

7

  Create a new account

53

9

  Create a new account

55

2

1

  Create a new account

57

2

2

2

92

2

4

5

5

Trong hàm

      Username

05, chúng ta sẽ nhắm mục tiêu đối tượng

5

32 mà chúng ta đã thiết lập trên hàm

5

19 trước đây. Biểu mẫu cho phép chúng tôi truy cập vào loại trình xử lý sự kiện được gọi là

      Username

03 vì các phần tử đó được liên kết với nhau trong HTML

Sử dụng một chức năng

5

50, chúng tôi sẽ lắng nghe sự kiện

      Username

03 và chuyển

      Username

12 qua phần thân của chức năng

Bên trong thân hàm, chúng ta có thể sử dụng phương thức

      Username

13 để giữ cho biểu mẫu không gửi theo cách mặc định của nó. Chúng tôi muốn làm điều này để ngăn chặn bất kỳ dữ liệu khó chịu nào chuyển qua nếu quá trình xác thực không được thông qua

Một lần nữa, chúng ta sẽ đặt một biến

5

53 được gán cho

5

24 để chúng ta có quyền truy cập vào cấp phạm vi cao hơn trong lớp

5

20 của chúng ta

Với biến này, chúng ta có thể lặp qua đối tượng

5

35 được khởi tạo trong lớp

5

20. Điều đó được thực hiện từ bên trong hàm

5

50

Mỗi trường chúng ta lặp qua được gán cho một biến

5

51 và cuối cùng được chuyển qua hàm

5

67 mà chúng ta đã tạo trước đó

Rất nhiều điều đang xảy ra ở đây, nhưng thật may mắn là chúng ta có thể sử dụng lại rất nhiều mã từ trước đó để đạt được những mục tiêu tương tự

Nhấp vào nút Tạo tài khoản để đảm bảo mỗi trường đều hợp lệ trước khi hoàn tất

7. Gọi Xác thực

Phần cuối cùng của câu đố xác thực biểu mẫu JavaScript đang gọi cả hai hàm

5

52 và

      Username

05. Nếu bạn còn nhớ, chúng tôi đã gọi hàm

5

49 ở phần đầu của hướng dẫn này. Tôi sẽ sử dụng nó để gọi hai chức năng

1

2

84

2

2

86

3

___

2

88

4

3_______90

5

3_______92

0

2

  Create a new account

14

4

4

08

6

4

10

7_______3_______92_______2_______9_______3_______1_______7_______5__

Kết quả cuối cùng

Với tất cả các chức năng và xác thực của chúng tôi, đây là mã xác thực biểu mẫu JavaScript cuối cùng để tham khảo. Phần lớn mã này có thể tái sử dụng và bạn luôn có thể thêm các loại trường bổ sung

1

2

84

2

2

86

3

2

88

4

2

90

5

2

92

0

2

  Create a new account

14

4

4

08

6

4

10

7

2

92

9

2

1

72

2

2

  Create a new account

42

2

4

2

6

4

44

2

8

79

  Create a new account

0

81

  Create a new account

2

83

  Create a new account

3

  Create a new account

53

  Create a new account

5

  Create a new account

55

  Create a new account

7

  Create a new account

57

  Create a new account

8

2

92

3

0

3

2

  Create a new account

40

3

4

  Create a new account

42

3

6

4

65

3

8

  Create a new account

46

3

9

1

4

70

3

  Create a new account

53

4

  Create a new account

55________6_

Một Lời Cảnh Báo

Nếu người dùng tắt JavaScript trong trình duyệt của họ, bạn có nguy cơ để dữ liệu không đầy đủ vào trang web hoặc ứng dụng của mình. Vấn đề này là nhược điểm của việc chỉ sử dụng xác thực biểu mẫu giao diện người dùng

Tôi khuyên bạn nên thêm giải pháp dự phòng để xác thực biểu mẫu bằng cách sử dụng thứ gì đó như mã phụ trợ

Tôi viết rất nhiều ứng dụng sử dụng mã giao diện người dùng và mã phụ trợ bằng khung ứng dụng web như Ruby on Rails. Khung xử lý rất nhiều vấn đề này cho tôi cùng với các tính năng bảo mật nâng cao

Ngay cả khi tôi thêm xác thực giao diện người dùng, hầu như tôi sẽ luôn chủ động thêm xác thực phụ trợ vào ứng dụng hoặc trang web

Việc thêm xác thực chương trình phụ trợ đảm bảo rằng nếu JavaScript tình cờ bị vô hiệu hóa trong trình duyệt hoặc có thể xảy ra sự cố ngẫu nhiên, tôi vẫn có thể dựa vào mã chương trình phụ trợ [thường là trên máy chủ] để loại bỏ dữ liệu không đủ

Bớt tư tưởng

Mặc dù có nhiều cải tiến mà chúng tôi có thể thực hiện đối với biểu mẫu tạo tài khoản mẫu này, nhưng tôi hy vọng các phương pháp tiếp cận được thực hiện trong hướng dẫn này đã làm sáng tỏ một số cách bạn có thể cải thiện biểu mẫu của riêng mình bằng xác thực JavaScript đơn giản

Hãy nhớ rằng, xác thực giao diện người dùng chỉ là một phần của dữ liệu gửi biểu mẫu xác thực đúng cách

Giải pháp phụ trợ hoặc một số bước trung gian để lọc dữ liệu là một rào cản đáng kể để ngăn dữ liệu khó chịu tiếp cận bất cứ nơi nào bạn lưu trữ dữ liệu của mình. Mã hóa vui vẻ

Xác thực mẫu trong JavaScript giải thích bằng ví dụ là gì?

Xác thực biểu mẫu cơ bản là gì?

Ba loại xác thực biểu mẫu là gì?

Các loại xác thực biểu mẫu khác nhau là gì?