Làm cách nào để viết quy tắc xác thực trong JavaScript?

octaValidate là một thư viện JavaScript mà tôi đã phát triển để giúp xác thực các biểu mẫu HTML của bạn bằng cách sử dụng các quy tắc xác thực, các biểu thức chính quy phức tạp và các thuộc tính đầu vào của biểu mẫu

Nếu bạn lo lắng về việc xác thực Biểu mẫu phía máy khách, thì tập lệnh này sẽ giải quyết vấn đề đó 100%

Bắt đầu nào

octaValidate repo GitHub

Tải xuống tập lệnh từ repo GitHub của tôi và nhập tập lệnh vào dự án của bạn

GitHub - Octagon-simon/octaValidate. Thư viện này giúp xác thực các biểu mẫu HTML của bạn bằng…

Thư viện này giúp xác thực các biểu mẫu HTML của bạn bằng cách sử dụng các quy tắc xác thực, biểu thức chính quy tinh vi và đầu vào biểu mẫu…

github. com

Bây giờ hãy liên kết tập lệnh trên trang của bạn

Hoặc bạn có thể sử dụng CDN có sẵn trên kho lưu trữ

MẪU PHIẾU ĐĂNG KÝ

Hãy tạo một biểu mẫu đăng ký đơn giản, nơi chúng tôi sẽ xác thực tên người dùng, địa chỉ email và mật khẩu của người dùng

Đây là hình thức trông như thế nào

THÊM THUỘC TÍNH OCTAVALIDATE

Dựa trên các quy tắc xác thực mà chúng tôi muốn áp dụng cho một phần tử đầu vào, chúng tôi cần thêm thuộc tính

let formVal = new octaValidate['form_register'];

1 vào phần tử đầu vào, sau đó cung cấp các quy tắc xác thực của chúng tôi trong đó

Dưới đây là một số quy tắc xác thực mà chúng tôi sẽ cần

• R - Một giá trị phải được cung cấp trên đầu vào
• EMAIL — Giá trị được cung cấp phải là địa chỉ email hợp lệ
• TÊN NGƯỜI DÙNG — Giá trị có thể chứa các chữ cái, số, dấu gạch ngang hoặc dấu gạch dưới

.

Bây giờ chúng ta hãy thêm các quy tắc xác thực này bên trong thuộc tính

let formVal = new octaValidate['form_register'];

1

Bạn có thể thấy rằng các đầu vào biểu mẫu đã được sửa đổi để có thuộc tính

let formVal = new octaValidate['form_register'];

1 và danh sách các quy tắc xác thực được chỉ định trong thuộc tính

Hiện tại, khi bạn nhấp vào nút đăng ký, không có gì xảy ra. các hình thức có thể sẽ gửi. Điều này là do chúng tôi chưa làm bất cứ điều gì trong JavaScript

BẮT ĐẦU XÁC NHẬN

Để bắt đầu xác thực trên một biểu mẫu cụ thể, chúng ta cần;

• Tạo một phiên bản mới của hàm

  let formVal = new octaValidate['form_register'];

  0 và chuyển vào biểu mẫu Id làm đối số đầu tiên, sau đó bất kỳ tùy chọn cấu hình nào làm đối số thứ hai

let formVal = new octaValidate['form_register'];

• Sau đó gọi phương thức validate[] để bắt đầu xác thực

formVal.validate[];

Kiểu trả về của phương thức này là boolean

• thật. Điều này có nghĩa là không có lỗi xác thực
• sai. Điều này có nghĩa là có lỗi xác thực

Trong trường hợp của chúng tôi, chúng tôi muốn biểu mẫu xác thực khi nó được gửi.
Vậy đây là điều tôi sẽ làm.

Đây là mã đầy đủ

KIỂM TRA HÌNH THỨC

Bây giờ hãy để chúng tôi kiểm tra mẫu đăng ký của chúng tôi. Sao chép mã ở trên và dán mã vào trình chỉnh sửa mã của bạn

Đây là những gì tôi nhận được khi nhấp vào nút gửi

Hoàn hảo

Bạn nghĩ quy tắc xác thực nào đang diễn ra ở đây?

Bạn hoàn toàn đúng. Đó là quy tắc bắt buộc [R]

Nếu bạn nhìn vào các quy tắc xác thực được áp dụng cho các đầu vào của biểu mẫu, bạn sẽ nhận thấy rằng tất cả chúng đều có R, viết tắt của quy tắc bắt buộc

Chúng tôi có thể thay đổi thông báo xác thực bằng cách sử dụng thuộc tính

let formVal = new octaValidate['form_register'];

1

Đây là hình thức trông như thế nào

Nếu chúng tôi gửi lại biểu mẫu, đây là những gì bạn sẽ thấy

Lưu ý rằng thông báo không còn là “Trường này là bắt buộc” mà đã được thay thế bằng thông báo tùy chỉnh

QUY TẮC XÁC NHẬN TÙY CHỈNH

Tôi chắc chắn rằng bạn hẳn đã chơi với biểu mẫu nhưng bạn có nhận thấy rằng trong số hai quy tắc xác thực [R, PASS] được cung cấp cho mục nhập mật khẩu, chỉ có quy tắc bắt buộc là hoạt động không?

Bạn đã đọc đúng. Và điều này là do, VƯỢT QUA, cũng là một quy tắc xác thực, chưa tồn tại

Một tính năng thú vị của octaValidate là bạn có toàn quyền tạo quy tắc xác thực của riêng mình

Bây giờ, hãy để chúng tôi xác định quy tắc xác thực tùy chỉnh có tên PASS mà chúng tôi sẽ sử dụng để xác thực đầu vào mật khẩu

Để xác định quy tắc xác thực tùy chỉnh, chúng tôi sẽ gọi phương thức customRule[], sau đó chuyển vào các đối số [RULE_TITLE, REG_EXP, ERROR_TEXT]

• RULE_TITLE. Đây chính là quy tắc xác thực tùy chỉnh
• ĐĂNG KÝ. Đây là biểu thức chính quy sẽ được sử dụng trên quy tắc xác thực này
• ERROR_TEXT. Đây là thông báo mà người dùng sẽ thấy nếu trong quá trình xác thực, quy tắc này không thành công

Vì đây là biểu mẫu đăng ký mẫu nên tôi muốn người dùng cung cấp 12345 làm mật khẩu, đây là biểu thức chính quy cho

let formVal = new octaValidate['form_register'];

2 đó

Vì vậy, tôi sẽ gọi phương thức như thế này

formVal.customRule['PASS', /^12345+$/, 'Enter 12345'];

Trong JavaScript khi xây dựng hoặc sử dụng biểu thức chính quy, chúng ta không phải cung cấp biểu thức dưới dạng chuỗi. Công cụ JavaScript tự nhiên nhận ra các biểu thức chính quy

Đây là giao diện của tập lệnh của chúng ta, với quy tắc tùy chỉnh được xác định

THỬ NGHIỆM QUY TẮC TÙY CHỈNH CỦA CHÚNG TÔI

Bây giờ chúng ta hãy lưu tệp và gửi lại biểu mẫu. Lần này, chúng tôi sẽ cung cấp các giá trị cho các đầu vào biểu mẫu

Đây là những gì tôi nhận được

Bạn có thể thấy rằng tôi đã nhận được thông báo yêu cầu cung cấp 12345 vì giá trị mà tôi đã cung cấp không phải là giá trị mà quy tắc xác thực cần

Bạn có thể thêm nhiều quy tắc xác thực tùy chỉnh hơn bằng một phương pháp duy nhất. Kiểm tra để thực hiện

THUỘC TÍNH ĐẦU VÀO MẪU

Bây giờ chúng ta cần đảm bảo rằng người dùng đang cung cấp chính xác cùng một giá trị trong trường mật khẩu cho trường nhập lại mật khẩu bằng thuộc tính

let formVal = new octaValidate['form_register'];

3

Đây là trường nhập mật khẩu và nhập lại mật khẩu

Sau đó, nếu chúng tôi gửi biểu mẫu, cung cấp giá trị sai cho trường nhập lại mật khẩu, đây là những gì tôi nhận được

Điều này xảy ra vì chúng tôi đã cung cấp id của mục nhập mật khẩu làm giá trị cho thuộc tính bằng trên trường nhập lại mật khẩu và bằng cách đó, trường nhập lại mật khẩu đang kiểm tra giá trị của nó so với giá trị của trường mật khẩu

Bạn cũng có thể sử dụng các thuộc tính độ dài để xác thực độ dài tối đa, độ dài tối thiểu hoặc độ dài của các giá trị đầu vào biểu mẫu

Đọc thêm về

TÍNH NĂNG GỌI LẠI

Bây giờ chúng ta có thể định nghĩa một hàm sẽ thực thi khi xác thực biểu mẫu không thành công hoặc khi xác thực biểu mẫu vượt qua.
Để sử dụng tính năng gọi lại, hãy xác định một hàm và truyền hàm đó làm đối số cho phương thức này validateCallBack[].

Đây là cách gọi phương thức

________số 8

TÍNH NĂNG TÌNH TRẠNG

Bạn có thể kiểm tra số lỗi xác thực trên một biểu mẫu cụ thể bằng cách gọi phương thức status[]

formVal.status[];

TÙY CHỌN CẤU HÌNH

Có hai tùy chọn cấu hình mặc định mà bạn có thể điều chỉnh để tận dụng tối đa tập lệnh mạnh mẽ này

• thành côngbiên giới. Tùy chọn này bật đường viền thành công màu xanh lá cây trên một thành phần cụ thể nếu xác thực thành công
• chế độ nghiêm ngặt. Tùy chọn này cắt bớt khoảng trắng thừa ở đầu và cuối của biểu mẫu nhập và ngăn người dùng cung cấp các từ khóa đặc biệt làm giá trị

Đây là cách sử dụng nó

let formVal = new octaValidate['form_register'];

0

Hai tùy chọn này bị tắt theo mặc định, để bật chúng, chúng ta cần chuyển nó làm đối số thứ hai cho thể hiện của hàm

Đây là tập lệnh được cập nhật

Vì vậy, chúng ta hãy thử gửi lại biểu mẫu bằng cách cung cấp giá trị null, NaN hoặc không xác định

Bạn có thể thấy chế độ nghiêm ngặt của chúng tôi đang thực sự diễn ra

Bây giờ, hãy để chúng tôi kiểm tra xem ranh giới thành công có hoạt động hay không bằng cách cung cấp giá trị chính xác cho trường tên người dùng

nó hoạt động

Có rất nhiều thứ để làm với kịch bản mạnh mẽ này

VIDEO THỬ NGHIỆM

Đây là video về cách tôi xác thực biểu mẫu của mình

Bạn có thể kiểm tra biểu mẫu demo trực tiếp trên trang demo này

Đọc thêm về tập lệnh mạnh mẽ này và cách sử dụng nó, trong tệp ReadMe

PHƯƠNG PHÁP THAM KHẢO

• xác thực[]. Phương thức này sẽ bắt đầu xác thực biểu mẫu
• quy tắc tùy chỉnh []. Phương pháp này cho phép bạn xác định quy tắc xác thực tùy chỉnh của mình
• xác thực CallBack[]. Phương pháp này cho phép bạn xác định chức năng gọi lại
• trạng thái[]. Sử dụng phương pháp này để kiểm tra số lỗi xác thực trên một biểu mẫu

Vui lòng đóng góp cho repo

Tôi rất thích đọc các đề xuất và tính năng của bạn về cách chúng tôi có thể cải thiện tập lệnh này

Đó là ngày ra mắt 🎉🎉🎉 Kiểm tra octaValidate để săn sản phẩm

Truy cập Tài liệu của thư viện TUYỆT VỜI này

octaValidate. Bắt đầu

Chào mừng bạn đến với thư viện TUYỆT VỜI này giúp xác thực các biểu mẫu HTML của bạn bằng cách sử dụng các quy tắc xác thực, thông thường tinh vi…

bát giác-simon. github. io

Cảm ơn bạn đã đọc

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng giao diện người dùng và phụ trợ có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa đáng kể quá trình phát triển theo nhóm. Bắt đầu với các giao diện người dùng có thể kết hợp như Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →

Xác thực được thực hiện như thế nào trong JavaScript?

Làm cách nào để đặt JavaScript hợp lệ tùy chỉnh?

Làm cách nào để xác thực một bảng trong JavaScript?

Làm cách nào để xác thực ký tự trong JavaScript?