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 Show
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àoHoặ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 OCTAVALIDATEDự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
. 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'); 1Bạ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ínhHiệ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;
let formVal = new octaValidate('form_register');
formVal.validate(); Kiểu trả về của phương thức này là boolean
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. Đây là mã đầy đủ KIỂM TRA HÌNH THỨCBâ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ỈNHTô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
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)
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');
Đâ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ÔIBâ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
THUỘC TÍNH ĐẦU VÀO MẪUBâ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ẠIBâ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. Đây là cách gọi phương thức ________số 8TÍNH NĂNG TÌNH TRẠNGBạ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ÌNHCó 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
Đây là cách sử dụng nó let formVal = new octaValidate('form_register'); 0Hai 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
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àyoctaValidate. Bắt đầuChà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?Xác thực cơ bản − Trước hết, biểu mẫu phải được kiểm tra để đảm bảo tất cả các trường bắt buộc đều được điền vào . Nó sẽ chỉ yêu cầu một vòng lặp qua từng trường trong biểu mẫu và kiểm tra dữ liệu. Xác thực định dạng dữ liệu - Thứ hai, dữ liệu được nhập phải được kiểm tra về hình thức và giá trị chính xác.
Làm cách nào để đặt JavaScript hợp lệ tùy chỉnh?setCustomValidity() HTMLSelectElement. phương thức setCustomValidity() đặt thông báo hợp lệ tùy chỉnh cho phần tử lựa chọn thành thông báo đã chỉ định. Sử dụng chuỗi trống để cho biết phần tử không có lỗi hiệu lực tùy chỉnh.
Làm cách nào để xác thực một bảng trong JavaScript?1 câu trả lời . Thay đổi ID thành lớp Lặp lại các trường khi gửi và dừng gửi nếu có lỗi Thêm trình xử lý sự kiện để xử lý bất kỳ đầu vào nào trong trường mà bạn muốn người dùng cập nhật Làm cách nào để xác thực ký tự trong JavaScript?JavaScript. Xác thực biểu mẫu HTML - kiểm tra tất cả các chữ cái . Hàm Javascript để kiểm tra tất cả các chữ cái trong trường function allLetter(inputtxt) { var alphabet = /^[A-Za-z]+$/; . giá trị. khớp (chữ cái)) { trả về true; . Sơ đồ Mã HTML < |