Làm cách nào để xác thực tuổi trong JavaScript?
|
Show
0 1. 4k lượt xem đã viết 4. 4 năm trước bởi binitamayekar ★ 5. 8k THÊM NHẬN XÉT CHIA SẺ CHỈNH SỬA Bạn có muốn tìm hiểu cách xác thực biểu mẫu nhập liệu của mình bằng javascript không? Trong quá trình nghiên cứu của mình, tôi đã rất ngạc nhiên bởi khả năng chỉ với HTML là bao nhiêu, vì vậy hãy nhớ đọc kỹ phần xác thực Hãy bắt đầu với bài viết. Đầu tiên, chúng tôi sẽ tạo một biểu mẫu, sau đó chúng tôi sẽ thêm các loại xác thực khác nhau lên trên biểu mẫu đó Tạo biểu mẫu bằng HTMLBước đầu tiên trước khi xác thực đầu vào của người dùng trong biểu mẫu của chúng tôi là tạo một. Đối với điều này, chúng tôi sẽ tạo biểu mẫu sau bằng HTML và CSS Trước hết, chúng ta tự tạo biểu mẫu bằng phần tử biểu mẫu. Phần tử này được sử dụng làm vùng chứa cho tất cả các trường đầu vào khác nhau mà bạn có thể tạo cho đầu vào của người dùng Bản sao Khi chúng ta nhìn vào hình ảnh của biểu mẫu cuối cùng, chúng ta có thể thấy các trường nhập sau mà chúng ta phải tạo
Giờ đây, chúng ta có thể thêm chúng vào biểu mẫu của mình bằng cách trước tiên xác định nhãn (tùy chọn, được sử dụng làm mô tả đầu vào) và sau đó là chính trường đầu vào Sao chép_______2 Điều này dẫn đến hình thức sau Hiện tại, người dùng không phải nhập bất kỳ dữ liệu nào. Do đó, chúng tôi có thể đặt một số phần nhất định trong biểu mẫu của mình thành bắt buộc. Nếu chúng tôi thêm thuộc tính bắt buộc vào trường nhập liệu, chúng tôi không thể gửi biểu mẫu mà không điền vào trường đã xác định. Bạn có thể thêm thuộc tính bắt buộc như thế này (trong trường hợp của chúng tôi, tôi sẽ không thêm nó vì nó giúp giảm bớt quá trình thử nghiệm) Bản sao Nhưng làm thế nào để chúng tôi gửi các hình thức? . Chúng tôi phải thêm khả năng gửi biểu mẫu. Để làm điều đó, chúng ta phải thêm một trường nhập liệu gửi vào biểu mẫu như thế này Bản sao Để hiểu rõ hơn phương thức gửi được sử dụng để làm gì, hãy kiểm tra tại đây. Bởi vì trong bài đăng này, chúng tôi chỉ muốn tạo biểu mẫu và xác thực các đầu vào thay vì sử dụng dữ liệu đã gửi Cuối cùng, chúng tôi cũng muốn thay đổi hình ảnh của biểu mẫu. Để làm điều này, chúng ta phải thêm CSS sau Sao chép_______5 Điều đó dẫn đến hình thức dự kiến. Trong trường hợp bạn không biết cách CSS hoạt động hoặc cách bạn nhập nó vào HTML, hãy xem bài đăng của tôi về kiến thức cơ bản về CSS tại đây Xác thực đầu vào biểu mẫuBây giờ chúng tôi đã tạo biểu mẫu, chúng tôi muốn xác thực các đầu vào của biểu mẫu. Điều đó có nghĩa là chúng tôi muốn kiểm tra xem đầu vào có định dạng mong muốn không (e. g. , email cần có ký hiệu @). Đầu tiên, chúng ta sẽ xem xét cách chúng ta có thể sử dụng xác thực biểu mẫu tích hợp do HTML cung cấp, sau đó chúng ta sẽ xem xét cách thực hiện những nội dung phức tạp hơn với JavaScript Xác thực đầu vào biểu mẫu bằng HTMLCách an toàn nhất và được đề xuất là sử dụng thuộc tính loại được cung cấp mà bạn có thể sử dụng với mọi trường nhập liệu. Trong danh sách trên, chúng tôi đã viết ra các loại khác nhau mà trường nhập của chúng tôi cần. Vì vậy, chúng ta hãy sử dụng kiến thức này để thêm tất cả các loại vào biểu mẫu với định dạng sau Bản sao_______6 Bây giờ chúng ta đã biết cú pháp, hãy mở rộng nó cho tất cả các trường đầu vào Bản sao (Để biết danh sách tất cả các loại đầu vào có thể, hãy kiểm tra tại đây) Điểm hay của các loại đầu vào là chúng ta đã có thể sắp xếp rất nhiều đầu vào sai mà người dùng có thể thực hiện. Ví dụ: người dùng không thể nhập chuỗi vào trường nhập số yêu thích của chúng tôi. Nó thực hiện điều đó bằng cách hạn chế các đầu vào có thể, một ví dụ thực sự hay là loại ngày vì nó cũng thay đổi trực quan trường đầu vào Nó cũng hoàn toàn giải quyết một số vấn đề của chúng tôi. Một ví dụ là chúng tôi không phải tạo xác thực của riêng mình cho trường email vì thuộc tính loại đã xử lý việc này cho chúng tôi Xác thực đầu vào tùy chỉnh bằng HTMLNgoài ra, chúng tôi có thể sử dụng một thuộc tính thực sự mạnh mẽ để giải quyết hầu hết các vấn đề đối với đầu vào tùy chỉnh. thuộc tính mẫu. Ví dụ, chúng ta có thể sử dụng nó cho số điện thoại hoặc ID người dùng Đoạn mã sau sẽ chỉ cho bạn cách xác định mẫu phù hợp cho đầu vào tùy chỉnh của chúng tôi Bản sao_______8 Thuộc tính mẫu sử dụng biểu thức chính quy. Regex là một công cụ khớp mẫu mạnh mẽ và bạn có thể đọc thêm về nó tại đây Xác thực đầu vào biểu mẫu bằng JavaScriptBạn chỉ cần xác thực đầu vào biểu mẫu bằng JavaScript trong các tình huống phức tạp hơn. Trong ví dụ của chúng tôi, đây là những ngày sinh trên 18 và số yêu thích từ 1 đến 100 Vì vậy, hãy bắt đầu với những điều cơ bản để xác thực biểu mẫu bằng JavaScript. Bước đầu tiên là thêm sự kiện onsubmit vào phần tử biểu mẫu. Trong trường hợp này, chúng tôi sẽ gọi một hàm JavaScript xử lý xác thực biểu mẫu của chúng tôi. Bạn có thể thêm nó như thế này Bản sao Để làm cho chức năng có thể gọi được, trước tiên chúng ta phải tạo nó. Trong trường hợp bạn không biết cách đưa JavaScript vào HTML, hãy xem bài đăng này tại đây. Vì vậy, hãy tạo chức năng và thêm một số nhận xét và chức năng phụ (chúng tôi nhận xét chúng, vì vậy chức năng đã hoạt động) cho các bước khác nhau mà chúng tôi cần thực hiện Bản sao Chúng tôi đã tạo một biến hợp lệ để theo dõi mọi đầu vào không hợp lệ. Trong trường hợp một trong các đầu vào không hợp lệ, chúng tôi sẽ trả về giá trị sai từ hàm và do đó làm gián đoạn quá trình gửi. Trong trường hợp hợp lệ là đúng, việc gửi sẽ được thông qua. (Đây không phải là cách tối ưu để thực hiện, nó chỉ nhằm hình dung các bước khác nhau mà bạn phải thực hiện. ) Xác thực tuổi bằng JavaScriptBây giờ, hãy bắt đầu với xác thực đầu tiên, ngày sinh. Do đó, chúng tôi bỏ ghi chú dòng 3 của hàm validateForm(). Ngoài ra, chúng ta sẽ tạo hàm validateBirthdate() Bản sao_______20 Được rồi, bây giờ chúng tôi biết các bước khác nhau mà chúng tôi cần thực hiện. Trước tiên hãy lấy ngày hiện tại Bản sao_______21 sau đó là ngày từ trường nhập (đối với điều này, chúng ta phải sử dụng bộ chọn DOM, trong trường hợp bạn không biết chúng có thể kiểm tra bài đăng này tại đây) Bản sao_______22 Và cuối cùng, chúng ta phải trừ đi và kiểm tra xem tuổi có lớn hơn 18 không Bản sao_______23 Cuối cùng, hãy mang tất cả lại với nhau Bản sao và dùng thử (trái dưới 18, phải trên 18) Để nhận cảnh báo, chúng ta có thể thêm dòng sau vào bên trong hàm xác thực biểu mẫu Bản sao Xác thực một dãy số bằng JavaScriptCuối cùng, xác thực rằng số yêu thích của chúng tôi nằm trong khoảng từ 1 đến 100. Để làm được điều đó, chúng ta sẽ bỏ ghi chú dòng 5 trong tập lệnh Biểu mẫu xác thực và tạo hàm validateFavoriteNumber() như thế này Bản sao Sau khi viết ra các bước, chúng tôi biết quy trình chúng tôi phải tuân theo để xác thực đầu vào. Đối với điều đó, trước tiên hãy lấy đầu vào của người dùng Bản sao_______27 kiểm tra xem nó có nằm trong khoảng từ 1 đến 100 không và trả lại Bản sao Cuối cùng, mang tất cả lại với nhau Bản sao và dùng thử (trái ngoài phạm vi, ngay trong phạm vi) Để nhận cảnh báo, chúng ta có thể thêm dòng sau vào bên trong hàm xác thực biểu mẫu Bản sao_______30 Phần kết luậnTrong bài đăng này, chúng tôi đã tạo một biểu mẫu và sau đó đã thêm các loại xác thực khác nhau. Thật đáng ngạc nhiên là bạn đã có thể đạt được bao nhiêu thứ với xác thực HTML cơ bản, đặc biệt là với thuộc tính mẫu Dưới đây là danh sách ngắn những thứ chúng ta có thể xác thực bằng HTML
Để tóm tắt, xác thực JavaScript chỉ cần thiết trong một số trường hợp đặc biệt, chẳng hạn như xác thực độ tuổi hoặc kiểm tra xem một số có nằm trong một phạm vi nhất định không Tôi hy vọng bài đăng này hữu ích cho bạn và cung cấp một số hiểu biết mới. Bạn có thể tìm thấy biểu mẫu tùy chỉnh và mã được viết trên GitHub của tôi tại đây. Trong trường hợp có một số câu hỏi mở, vui lòng hỏi và tôi sẽ cố gắng giúp bạn Nếu bạn quan tâm đến nhiều nội dung liên quan đến phát triển web và phần mềm hơn, hãy đăng ký nhận bản tin của tôi và lấy một cuốn sách điện tử miễn phí ở trên cùng Làm cách nào để xác thực độ tuổi trong JavaScript?1. Xác thực định dạng ngày dd/MM/yyyy. Ngày sinh (DOB) sẽ được xác thực trước cho định dạng dd/MM/yyyy bằng cách sử dụng Biểu thức chính quy (Regex) . 2. Xác nhận độ tuổi tối thiểu 18+. Sự khác biệt giữa độ tuổi được nhập trong TextBox và Ngày hiện tại tối thiểu là 18 năm.
Làm cách nào để xác thực độ tuổi trên 18 trong JavaScript?Làm cách nào để xác thực người dùng đó từ 18 tuổi trở lên tính từ ngày sinh? . hàm underAgeValidate(birthday){ // hàm này sẽ chấp nhận hai loại định dạng yyyy-mm-dd và yyyy/mm/dd var OptimizeBirthday = birthday .
Làm cách nào để thêm xác thực ngày trong JavaScript?Ở đây, chúng ta có ba phương pháp khác nhau để xác thực ngày. . Sử dụng Phương thức getTime() Sử dụng Phương thức isFinite() Sử dụng phương thức Moment JS isValid() Làm cách nào để xác thực tên trong JavaScript?Bạn có thể sử dụng phương thức javascript test() để xác thực trường tên. Phương thức test() kiểm tra sự trùng khớp trong một chuỗi. |
