Hướng dẫn how do i validate a name in html? - làm cách nào để xác thực tên trong html?

Trong hướng dẫn này, chúng tôi sẽ khám phá thuộc tính HTML,

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Hình thức video xác thực

Kiểm tra hướng dẫn video bên dưới, đăng ký TUTS+ trên YouTube hoặc đọc tiếp để tìm hiểu thêm về xác thực biểu mẫu HTML và thuộc tính mẫu!

Xác thực hình thức HTML5

Xác thực biểu mẫu có tầm quan trọng quan trọng đối với bảo mật trang web cũng như khả năng sử dụng của nó. Quá trình xác thực đánh giá liệu giá trị đầu vào có ở đúng định dạng trước khi gửi nó hay không. Ví dụ: nếu chúng ta có trường đầu vào cho một địa chỉ email, giá trị chắc chắn phải chứa một địa chỉ email hợp lệ; Nó nên bắt đầu bằng một chữ cái hoặc một số, theo sau là & nbsp; ________ 13 & nbsp; ký hiệu, sau đó kết thúc bằng một tên miền.

Thông số kỹ thuật HTML5 đã làm cho việc xác nhận dễ dàng hơn một chút với việc giới thiệu các loại đầu vào mới như & nbsp; ____ 14, & nbsp; ____ 15, và & nbsp; ________ 16, và chúng cũng được đóng gói với xác thực được xác định trước. Bất cứ khi nào giá trị được đưa ra không được đáp ứng với định dạng dự kiến, các loại đầu vào này sẽ ném một thông báo lỗi do đó ngăn chặn việc gửi.

Tuy nhiên, mong đợi mọi kịch bản đầu vào có thể được phục vụ là không thực tế. Điều gì sẽ xảy ra nếu bạn có tên người dùng, mã zip hoặc bất kỳ loại dữ liệu đặc biệt nào không được chỉ định là loại đầu vào tiêu chuẩn? Làm thế nào để chúng ta xác nhận những đầu vào đó? Đây là nơi thuộc tính & nbsp; ________ 12 & nbsp; xuất hiện.

Sử dụng thuộc tính mẫu

Thuộc tính & nbsp; ________ 12 & nbsp; chỉ được áp dụng trên phần tử

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Ví dụ, giả sử chúng tôi có đầu vào tên người dùng trong hình thức của chúng tôi. Có một loại tiêu chuẩn cho tên người dùng, do đó chúng tôi sử dụng thông thường & nbsp; ________ 20 & nbsp; loại đầu vào:

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username">
</form>

Hãy để xác định một quy tắc để thêm bằng cách sử dụng thuộc tính & nbsp; ____ 12 & nbsp; Trong trường hợp này, chúng tôi sẽ chỉ định rằng tên người dùng chỉ nên bao gồm các chữ cái viết thường; Không có chữ in hoa, số hoặc các ký tự đặc biệt khác cho phép. Ngoài ra, độ dài tên người dùng không nên có hơn 15 ký tự. Trong Regex, quy tắc này có thể được thể hiện là & nbsp; ________ 22.

Thêm & nbsp; ________ 22 & nbsp; là giá trị của & nbsp; ________ 12 & nbsp; thuộc tính trong đầu vào tên người dùng của chúng tôi:

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Bây giờ, vì nó chỉ chấp nhận các chữ cái viết thường, việc gửi bất kỳ giá trị nào khác sẽ ném thông báo lỗi:

Như bạn có thể thấy ở trên, thông báo lỗi cho biết, xin vui lòng khớp với định dạng được yêu cầu. Vì vậy, xác thực của chúng tôi đang hoạt động, nhưng thông báo này không giúp người dùng của chúng tôi hiểu định dạng được yêu cầu thực sự là gì. Ux thất bại.

Tùy chỉnh thông báo xác thực

May mắn thay, chúng tôi có thể tùy chỉnh thông báo để hữu ích hơn và chúng tôi có một vài cách để làm điều đó. Cách tiếp cận dễ nhất là chỉ định thuộc tính ____ 25 & nbsp;

<form action="somefile.php">
	<input 
		type="text" 
        name="username"
		placeholder="Username"
		pattern="[a-z]{1,15}"
		title="Username should only contain lowercase letters. e.g. john">
</form>

Bây giờ tiêu đề được bao gồm cùng với thông báo mặc định:

Tuy nhiên, thông điệp bật lên không nhất quán. Nếu chúng ta so sánh nó với loại được ném bởi loại đầu vào email được hiển thị trước đó, các hướng dẫn thực tế có thể nổi bật hơn.

Cách tiếp cận thứ hai sẽ giải quyết điều này cho chúng tôi.

Thay thế thông báo xác thực HTML5 mặc định

Bây giờ, hãy thay thế các loại mặc định, vui lòng khớp với định dạng được yêu cầu & NBSP; với một thông báo hoàn toàn tùy chỉnh. Chúng tôi sẽ sử dụng một chút JavaScript để làm điều này.

Bắt đầu bằng cách thêm một & nbsp; ____ ____ 26 & nbsp; vào phần tử

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

<form action="somefile.php">
    <input 
        type="text" 
        name="username" 
        placeholder="Username"
        pattern="[a-z]{1,15}"
        id="username">
</form>

Bây giờ, chúng tôi có thể chọn phần tử đầu vào bằng JavaScript và gán nó cho một biến (giữa các thẻ

<form action="somefile.php">
	<input 
		type="text" 
        name="username"
		placeholder="Username"
		pattern="[a-z]{1,15}"
		title="Username should only contain lowercase letters. e.g. john">
</form>

var input = document.getElementById('username');

Cuối cùng, chúng tôi chỉ định thông báo được sử dụng khi đầu vào hiển thị trạng thái không hợp lệ của nó.

input.oninvalid = function(event) {
	event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}

Sự kiện ____ 29 & nbsp; kế thừa một đối tượng

<form action="somefile.php">
    <input 
        type="text" 
        name="username" 
        placeholder="Username"
        pattern="[a-z]{1,15}"
        id="username">
</form>

Bây giờ chúng ta sẽ tìm thấy thông báo tùy chỉnh thay thế liền mạch mặc định.

Tạo kiểu cho trạng thái xác nhận của chúng tôi

Để bổ sung cho các loại đầu vào mới và các phương thức này để thiết lập thông báo xác thực tùy chỉnh, spec CSS3 mang đến một vài lớp giả hữu ích, & nbsp; ________ 34 & nbsp; và

<form action="somefile.php">
    <input 
        type="text" 
        name="username" 
        placeholder="Username"
        pattern="[a-z]{1,15}"
        id="username">
</form>

input:invalid {
	border-color: red;
}
input,
input:valid {
	border-color: #ccc;
}

Có một số điều cần ghi nhớ khi sử dụng các lớp giả này:

• Đầu tiên, & nbsp; ________ 34 & nbsp; được áp dụng theo mặc định, ngay cả khi giá trị đầu vào trống. Do đó, như bạn có thể thấy ở trên, chúng tôi đã đặt & nbsp; ________ 37 & nbsp; to & nbsp; ________ 38; màu mặc định được cung cấp cho phần tử đầu vào của chúng tôi. Giá trị trống luôn được coi là hợp lệ, trừ khi chúng tôi đã thêm & nbsp; ________ 39 & nbsp; thuộc tính. Trong trường hợp đó, đầu vào không hợp lệ và màu đường viền màu đỏ được đưa ra.
• Các kiểu hợp lệ và không hợp lệ áp dụng ngay lập tức khi người dùng đang gõ, ngay cả khi giá trị trống. Thay đổi kiểu ngay lập tức sau đó có thể ném người dùng vào hoảng loạn.

Một từ về tạo kiểu cho thông báo bật lên

Xác thực biểu mẫu HTML5 đã trở thành một tiêu chuẩn mới theo thông số kỹ thuật HTML5, nhưng cách thức bật lên của lỗi xuất hiện hoàn toàn tùy thuộc vào nhà cung cấp trình duyệt. Mong đợi các thẩm mỹ khác nhau trong các trình duyệt khác nhau, giúp ích cho sự nhất quán của giao diện người dùng của bạn.

Google Chrome đã ngăn chặn khả năng tùy chỉnh các kiểu bật lên mặc định & nbsp; một vài năm trước. Nếu đây là điều bạn muốn đạt được, thì tùy chọn duy nhất & nbsp; còn lại & nbsp; là hoàn toàn ghi đè tin nhắn bật lên bằng JavaScript, vì vậy hãy để xem cách hoạt động của nó!

Đi cao cấp hơn

Chúng tôi sẽ tạo ra một cửa sổ bật lên tùy chỉnh sẽ xuất hiện khi giá trị đầu vào của chúng tôi không hợp lệ. Để bắt đầu, chúng ta cần chọn một vài yếu tố cần thiết, cụ thể là ____ 19 & nbsp; và & nbsp; ________ 41 & nbsp; các yếu tố:

var input = document.getElementById('username');
var form  = document.getElementById('form');

Tiếp theo, chúng tôi sẽ tạo một yếu tố mới sẽ chứa thông điệp của chúng tôi:

var	elem               = document.createElement('div');
	elem.id            = 'notify';
	elem.style.display = 'none';
	form.appendChild(elem);

Ở đây chúng tôi đã tạo một phần tử mới & nbsp; ____ 42 & nbsp; Chúng tôi đã cung cấp cho nó một id của & nbsp; ____ 43 và giấu nó bằng cách đặt & nbsp; ____ 44 & nbsp; tài sản cho & nbsp; ________ 45. Cuối cùng, chúng tôi đã thêm các & nbsp; ____ 42 & nbsp; trong & nbsp; ________ 41.

Làm việc với các sự kiện

Có hai sự kiện chúng ta cần phải đối phó. Đầu tiên, sự kiện & nbsp; ____ 48 & nbsp; gọi khi giá trị của đầu vào không khớp với mẫu. Chúng tôi sẽ chạy như sau trong & nbsp; ____ 48 & nbsp; sự kiện:

input.addEventListener('invalid', function(event){
	event.preventDefault();
	if ( ! event.target.validity.valid ) {
		elem.textContent   = 'Username should only contain lowercase letters e.g. john';
		elem.className     = 'error';
		elem.style.display = 'block';

		input.className    = 'invalid animated shake';
	}
});

Ở đây, với ____ ____ 50, & nbsp; chúng tôi ngăn chặn hành vi mặc định để thông báo bật lên trình duyệt mặc định không xuất hiện. Thay vào đó, chúng tôi sẽ thể hiện của riêng mình thông qua phần tử mới & nbsp; ____ 42 & nbsp; Chúng tôi thêm tin nhắn văn bản trong nội dung, thêm một lớp mới, & nbsp; ________ 52 & nbsp; và hiển thị thông báo bằng cách đặt màn hình thành & nbsp; ________ 53.

Chúng tôi cũng thêm một lớp, & nbsp; ____ 48, vào phần tử đầu vào, mang lại cho nó một màu đường viền màu đỏ. Chúng ta cũng cần đặt quy tắc phong cách trong bảng kiểu CSS.

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Ngoài ra, bạn cũng có thể thêm & nbsp; ____ 55 & nbsp; các lớp từ & nbsp; animate.css. & Nbsp; Điều này mang lại cho nó một sự tinh tế nhất định bằng cách sử dụng Shake & nbsp; hoạt hình.

Sự kiện thứ hai là & nbsp; ________ 19 & nbsp; sự kiện. Sự kiện này gọi khi giá trị đầu vào được thay đổi. Chúng tôi sẽ sử dụng sự kiện này để hoàn nguyên đầu vào về trạng thái bình thường, cũng như ẩn thông điệp bật lên, như sau.

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Như bạn có thể thấy ở trên, chúng tôi sẽ xóa các tên lớp khỏi phần tử & nbsp; ____ 19 & nbsp; và ẩn tin nhắn bật lên.

Bây giờ chúng tôi có một thông báo xác nhận bật lên hoàn toàn tùy chỉnh. Cho nó đi: Nhập bất kỳ giá trị không hợp lệ nào:

Lưu ý: Don Tiết quên kiểm tra các yếu tố Envato nếu bạn đang tìm kiếm thiết kế UI mẫu đầy cảm hứng.: don’t forget to check out Envato Elements if you’re looking for inspiring form UI design.

Suy nghĩ cuối cùng

Sử dụng các loại đầu vào tiêu chuẩn cùng với thuộc tính

<form action="somefile.php">
	<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Đáng ngạc nhiên, ngay cả khi người dùng đã vô hiệu hóa JavaScript trong trình duyệt, các trình duyệt mới nhất vẫn sẽ hiển thị xác thực bật lên và ngăn chặn việc gửi biểu mẫu. Trên thực tế, hỗ trợ trên tất cả các trình duyệt chính hiện nay rất chắc chắn:

Tôi hy vọng bạn thích hướng dẫn và giữ nó như một tài liệu tham khảo tiện dụng cho xác thực biểu mẫu HTML5.

Tìm hiểu JavaScript: Hướng dẫn đầy đủ

Chúng tôi đã xây dựng một hướng dẫn đầy đủ để giúp bạn & NBSP; tìm hiểu JavaScript, cho dù bạn chỉ bắt đầu làm nhà phát triển web hay bạn muốn khám phá các chủ đề nâng cao hơn.

Làm thế nào để bạn xác nhận văn bản trong HTML?

Làm cách nào để xác nhận tên người dùng trong HTML?

Làm thế nào để bạn xác nhận tên và họ trong HTML?

Làm thế nào để bạn xác nhận dữ liệu trong HTML?

Xác minh trong HTML là gì?

Làm thế nào để xác thực HTML hoạt động?