Hướng dẫn how do you show error messages in html form? - làm cách nào để hiển thị thông báo lỗi trong dạng html?

Ví dụ xác nhận biểu mẫu tích hợp

Trong phần này, chúng tôi sẽ kiểm tra một số thuộc tính mà chúng tôi đã thảo luận ở trên.

Tệp bắt đầu đơn giản

Hãy bắt đầu với một ví dụ đơn giản: một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  Would you prefer a banana or cherry?
  
  Submit

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Để bắt đầu, hãy tạo một bản sao của

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Thuộc tính cần thiết

Tính năng xác thực HTML đơn giản nhất là thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

Thêm thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry? [required]
  
  Submit

Lưu ý các CSS được bao gồm trong tệp ví dụ:

input:invalid {
  border: 2px dashed red;
}

input:invalid:required {
  background-image: linear-gradient[to right, pink, lightgreen];
}

input:valid {
  border: 2px solid black;
}

CSS này làm cho đầu vào có đường viền đứt nét màu đỏ khi nó không hợp lệ và một đường viền màu đen rắn tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây:

Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được lấy nét, thông báo lỗi mặc định ["Vui lòng điền vào trường này"] xuất hiện và biểu mẫu được ngăn chặn được gửi.

Sự hiện diện của thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  Would you prefer a banana or cherry? [required]
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

Lưu ý: Đối với trải nghiệm người dùng tốt, hãy cho biết người dùng khi cần trường biểu mẫu. Nó không chỉ trải nghiệm người dùng tốt, nó được yêu cầu bởi các hướng dẫn tiếp cận WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần: ví dụ, tại sao bạn thực sự cần biết giới tính hoặc tiêu đề của ai đó? For good user experience, indicate to the user when form fields are required. It isn't only good user experience, it is required by WCAG accessibility guidelines. Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title?

Xác nhận dựa trên biểu thức chính quy

Một tính năng xác nhận hữu ích khác là thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

RegEXPS khá phức tạp và chúng tôi không có ý định dạy bạn một cách triệt để trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn một ý tưởng cơ bản về cách chúng hoạt động.

• 
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4 - khớp với một ký tự là

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4 [không phải

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  6, không phải

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  7, v.v.].

• 
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  8 - khớp

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4, tiếp theo là

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  6, tiếp theo là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient[to right, pink, lightgreen];
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  1.
• ________ 52 phù hợp với

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4, tùy chọn theo sau là một

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  6, tiếp theo là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient[to right, pink, lightgreen];
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  1. [

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient[to right, pink, lightgreen];
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6 hoặc

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  8]
• ________ 58 phù hợp với

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4, tùy chọn theo sau là bất kỳ số lượng

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  6 nào, tiếp theo là

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient[to right, pink, lightgreen];
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  1. [

  input:invalid {
    border: 2px dashed red;
  }
  
  input:invalid:required {
    background-image: linear-gradient[to right, pink, lightgreen];
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  6,

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  8,

  
    Would you prefer a banana or a cherry?
    
    Submit
  
  

  4, v.v.].

• 
    Would you prefer a banana or a cherry?
    
    Submit
  
  

  5 - khớp với một ký tự là

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4 hoặc

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  6.

• 
    Would you prefer a banana or a cherry?
    
    Submit
  
  

  8 - khớp chính xác

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  8 hoặc chính xác

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  0 [nhưng không phải

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  1 hoặc

  
    Would you prefer a banana or cherry? [required]
    
    Submit
  
  

  4 hoặc

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  

  3, v.v.].

Có nhiều khả năng khác mà chúng tôi không bao gồm ở đây. Đối với một danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu biểu thức thường xuyên của chúng tôi.

Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or a cherry?
  
  Submit

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Điều này cung cấp cho chúng tôi bản cập nhật sau - hãy thử nó:

Trong ví dụ này, phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

Tại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính

  Would you prefer a banana or cherry?
  
  Submit

Nếu giá trị không trống của

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  Would you prefer a banana or cherry? [required]
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

Lưu ý: Một số loại phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  Would you prefer a banana or cherry?
  
  Submit

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  Would you prefer a banana or cherry?
  
  Submit

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

Hạn chế độ dài của các mục nhập của bạn

Bạn có thể hạn chế độ dài ký tự của tất cả các trường văn bản được tạo bởi

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

Các trình duyệt thường không để người dùng nhập giá trị dài hơn dự kiến ​​vào các trường văn bản. Trải nghiệm người dùng tốt hơn là chỉ sử dụng

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

Hạn chế các giá trị của các mục nhập của bạn

Đối với các trường số [nghĩa là

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

  Would you prefer a banana or cherry?
  
  Submit

  Would you prefer a banana or cherry?
  
  Submit

Hãy xem xét một ví dụ khác. Tạo một bản sao mới của tệp fruit-start.html.

Bây giờ xóa nội dung của phần tử

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

  
    Would you prefer a banana or a cherry?
    
  
  
    How many would you like?
    
  
  
    Submit
  

• Ở đây bạn sẽ thấy rằng chúng tôi đã cho trường

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  6 một

  
    Would you prefer a banana or cherry?
    
    Submit
  
  

  1 và

  
    Would you prefer a banana or cherry?
    
    Submit
  
  

  2 của sáu, có cùng chiều dài với chuối và anh đào.
• Chúng tôi cũng đã cho trường

  input:invalid {
    border: 2px dashed red;
  }
  
  input:valid {
    border: 2px solid black;
  }
  
  div {
    margin-bottom: 10px;
  }
  

  9 một

  
    Would you prefer a banana or cherry?
    
    Submit
  
  

  3 của một và

  
    Would you prefer a banana or cherry?
    
    Submit
  
  

  4 của mười. Đã nhập các số bên ngoài phạm vi này sẽ hiển thị là không hợp lệ; Người dùng sẽ không thể sử dụng mũi tên tăng/giảm để di chuyển giá trị bên ngoài phạm vi này. Nếu người dùng theo cách thủ công một số bên ngoài phạm vi này, dữ liệu không hợp lệ. Số không cần thiết, vì vậy việc loại bỏ giá trị vẫn sẽ dẫn đến giá trị hợp lệ.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

Đây là ví dụ chạy trực tiếp:

Lưu ý:

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

div {
  margin-bottom: 10px;
}

function validateForm[]{
	var name = document.forms["myForm"]["your-name"].value;
	var email = document.forms["myForm"]["your-email"].value;
	var phone = document.forms["myForm"]["your-phone"].value;
	var message = document.forms["myForm"]["your-message"].value;

	if [name.length