Home-theater-designers
JavaScript là một trong những ngôn ngữ lập trình phổ biến và linh hoạt nhất mà bạn có thể bắt đầu sử dụng ngày nay. Ngôn ngữ lập trình này được cho là ngôn ngữ của web và rất cần thiết để tăng tính tương tác cho các trang web của bạn.
Phần tử biểu mẫu là một trong những phần tử HTML được sử dụng nhiều nhất trên các trang web. Các biểu mẫu này lấy đầu vào từ người dùng và xử lý trong trình duyệt hoặc máy chủ. Tuy nhiên, điều quan trọng là phải xác thực các đầu vào này để giải quyết các vấn đề bảo mật và các lỗi không mong muốn.
Hiểu thao tác DOM
Trước khi chúng tôi tiến hành triển khai xác thực biểu mẫu phía máy khách bằng JavaScript, điều cần thiết là phải hiểu Mô hình đối tượng tài liệu, thường được gọi là 'DOM'. DOM là một API được tiêu chuẩn hóa cho phép JavaScript tương tác với các phần tử trên trang web HTML.
Tìm hiểu thêm: Người hùng tiềm ẩn của các trang web: Hiểu về DOM
Để thêm trình xử lý sự kiện và truy xuất đầu vào của người dùng, bạn sẽ cần hiểu những điều cơ bản về thao tác DOM. Dưới đây là một ví dụ giải thích cách bạn có thể thay đổi nội dung của trang web bằng cách sử dụng API DOM và JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Trong đoạn mã trên,
Bây giờ bạn đã hiểu cơ bản về thao tác DOM, hãy tiếp tục và triển khai xác thực biểu mẫu.
Xác thực biểu mẫu bằng JavaScript
Có nhiều loại đầu vào khác nhau mà bạn có thể lấy từ người dùng. Loại văn bản, loại email, loại mật khẩu, nút radio và hộp kiểm là một số trong những loại phổ biến nhất mà bạn có thể gặp phải. Do phần lớn các loại đầu vào này, bạn sẽ cần sử dụng các logic khác nhau để xác nhận từng loại trong số chúng.
Trước khi đi sâu vào xác thực, chúng ta hãy dành một chút thời gian để hiểu các biểu mẫu HTML và tầm quan trọng của chúng. Biểu mẫu HTML là một trong những cách chính bạn tương tác với trang web vì chúng cho phép bạn nhập dữ liệu của mình, áp dụng các thay đổi, gọi cửa sổ bật lên, gửi thông tin đến máy chủ và hơn thế nữa.
cách sửa cổng usb bị hỏng
HTML phần tử được sử dụng để tạo các biểu mẫu giao diện người dùng này. Đây là cách bạn có thể xác thực các đầu vào của một biểu mẫu HTML:
1. Xác thực Email
Cho dù bạn đang xây dựng một hệ thống xác thực hay chỉ thu thập email của người dùng cho bản tin của mình, điều quan trọng là phải xác thực email trước khi bạn có thể lưu trữ nó trong cơ sở dữ liệu của mình hoặc xử lý nó. Để kiểm tra xem một email có đáp ứng tất cả các điều kiện bắt buộc hay không, bạn có thể sử dụng biểu hiện thông thường .
HTML:
JavaScript:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Xác thực mật khẩu
Mật khẩu là một phần dữ liệu quan trọng cần một loại xác thực đặc biệt để đảm bảo tính bảo mật của nó. Hãy xem xét biểu mẫu đăng ký có hai trường: trường mật khẩu và trường xác nhận mật khẩu. Để xác thực cặp đầu vào này, đây là một số điều bạn cần xem xét:
- Mật khẩu phải dài hơn 6 ký tự.
- Giá trị của mật khẩu và trường xác nhận mật khẩu phải giống nhau.
HTML:
JavaScript:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. Xác thực đầu vào vô tuyến
Đầu vào vô tuyến HTML là một loại phần tử điều khiển đồ họa đặc biệt cho phép người dùng chỉ chọn một trong số các tùy chọn loại trừ lẫn nhau được xác định trước. Một trường hợp sử dụng phổ biến của đầu vào như vậy sẽ là để chọn giới tính. Để xác thực thông tin đầu vào như vậy, bạn sẽ cần kiểm tra xem ít nhất một trong số chúng có được chọn hay không.
Điều này có thể đạt được bằng cách sử dụng toán tử logic chẳng hạn như AND ( && ) và không ( ! ) toán tử theo cách này:
HTML:
Male
Female
Others
JavaScript:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. Chọn Xác thực đầu vào
Các Phần tử HTML được sử dụng để tạo danh sách thả xuống. Các thẻ bên trong xác định các tùy chọn có sẵn trong danh sách thả xuống. Mỗi người trong số này các thẻ có thuộc tính giá trị được liên kết với chúng.
không thể hoàn thành hành động vì tệp đang mở trong một chương trình khác
Đối với tùy chọn mặc định hoặc ban đầu, bạn có thể đặt giá trị của nó thành một chuỗi trống để nó sẽ được coi là một tùy chọn không hợp lệ. Đối với tất cả các tùy chọn khác, hãy đặt một thuộc tính giá trị thích hợp. Đây là một ví dụ về cách bạn có thể xác thực yếu tố đầu vào:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
xem phim kinh dị trực tuyến miễn phí
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Xác thực hộp kiểm
Các phần tử đầu vào của hộp kiểm loại được hiển thị theo mặc định dưới dạng các hộp được chọn hoặc đánh dấu khi được kích hoạt. Hộp kiểm cho phép bạn chọn các giá trị duy nhất để gửi trong một biểu mẫu. Hộp kiểm là một lựa chọn phổ biến cho đầu vào 'chấp nhận các điều khoản và điều kiện'.
Để tìm hiểu xem hộp kiểm có được đánh dấu hay không, bạn có thể truy cập thuộc tính đã chọn trên đầu vào hộp kiểm. Đây là một ví dụ:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Phòng bệnh hơn chữa bệnh
Bạn nên xác thực tất cả các thông tin đầu vào mà bạn nhận được từ khách truy cập để mang lại trải nghiệm an toàn và bảo mật. Tin tặc luôn cố gắng nhập dữ liệu độc hại vào các trường đầu vào để thực hiện các cuộc tấn công tập lệnh chéo trang web và tiêm SQL.
Bây giờ bạn đã hiểu cách xác thực đầu vào HTML của mình, tại sao không thử bằng cách xây dựng biểu mẫu và triển khai các chiến lược bạn đã thấy ở trên?
Đăng lại Đăng lại tiếng riu ríu E-mail Cách tạo biểu mẫu trong HTMLCho phép người dùng của bạn nhập dữ liệu trên các trang web của bạn bằng các biểu mẫu HTML.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- JavaScript
- Phát triển web
- Hướng dẫn viết mã
Nitin là một nhà phát triển phần mềm đam mê và là một sinh viên kỹ thuật máy tính đang phát triển các ứng dụng web bằng công nghệ JavaScript. Anh ấy làm việc như một nhà phát triển web tự do và thích viết cho Linux và Lập trình khi rảnh rỗi.
Xem thêm từ Nitin RanganathTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký