Cách sử dụng JavaScript để xác thực biểu mẫu C# mà không cần chú thích dữ liệu

Xác thực biểu mẫu phía máy khách trong C# bằng JavaScript

Xác thực biểu mẫu là một bước quan trọng khi xây dựng ứng dụng web để đảm bảo rằng dữ liệu được gửi là chính xác và đầy đủ. Các nhà phát triển thường chọn giữa các phương thức xác thực phía máy chủ hoặc phía máy khách. Một cách tiếp cận phổ biến trong C# là sử dụng DataAnnotations để xác thực phía máy chủ. Tuy nhiên, điều này có thể không phải lúc nào cũng phù hợp với mọi kịch bản.

Trong một số trường hợp nhất định, xác thực phía máy khách bằng JavaScript có thể mang lại trải nghiệm người dùng năng động hơn, cho phép phát hiện lỗi trước khi chúng được gửi đến máy chủ. Cách tiếp cận này ngăn chặn các yêu cầu máy chủ không cần thiết, cải thiện cả hiệu suất và tương tác người dùng.

Trong bài viết này, chúng ta sẽ khám phá cách xác thực biểu mẫu trong C# bằng cách sử dụng JavaScript mà không cần dựa vào các thuộc tính DataAnnotations tiêu chuẩn. Cụ thể, chúng tôi sẽ tập trung vào việc xác thực nhiều vùng văn bản và đảm bảo rằng biểu mẫu không tải lại sớm khi gửi.

Nếu biểu mẫu của bạn đã có dữ liệu hiện có và bạn xóa một trong các trường, bạn có thể gặp phải sự cố trong đó biểu mẫu tải lại mà không hiển thị cảnh báo dự kiến. Chúng ta sẽ đi sâu vào lý do tại sao điều này xảy ra và cách giải quyết bằng cách sử dụng logic JavaScript hiệu quả.

Tìm hiểu xác thực biểu mẫu phía máy khách bằng JavaScript và C#

Trong bài viết này, chúng tôi tập trung vào việc tạo một cơ chế xác thực biểu mẫu đơn giản bằng cách sử dụng JavaScript cho dự án C# ASP.NET Core. Biểu mẫu có một số vùng văn bản mà người dùng phải nhập thông tin và chúng tôi sử dụng JavaScript để đảm bảo tất cả các trường đều được điền chính xác trước khi gửi biểu mẫu. Bằng cách bỏ qua C# DataAnnotations, chúng tôi triển khai xác thực giao diện người dùng tùy chỉnh diễn ra ngay lập tức, ngăn trang tải lại một cách không cần thiết. Phương pháp này nâng cao hiệu suất và trải nghiệm người dùng bằng cách giảm các cuộc gọi máy chủ không cần thiết.

Để thực hiện được điều này, xác thựcForm() Hàm JavaScript kiểm tra tất cả các vùng văn bản trong biểu mẫu. Lệnh truy vấnSelectorAll() được sử dụng để thu thập tất cả các phần tử của vùng văn bản, sau đó được lặp lại bằng vòng lặp. Nếu bất kỳ vùng văn bản nào được tìm thấy trống (nghĩa là giá trị chỉ là khoảng trắng hoặc hoàn toàn trống), thì tất cả đã điền cờ được đặt thành sai. Khi điều này xảy ra, hàm sẽ kích hoạt một cảnh báo thông báo cho người dùng rằng tất cả các trường phải được điền và việc gửi biểu mẫu sẽ bị tạm dừng bằng cách sử dụng sự kiện.preventDefault(). Điều này ngăn chặn việc tải lại trang một cách hiệu quả, cho phép người dùng sửa lỗi.

Sự cố được mô tả phát sinh khi người dùng xóa dữ liệu khỏi vùng văn bản và gửi biểu mẫu. Trong trường hợp biểu mẫu được điền sẵn và một trường bị xóa, nếu quá trình xác thực của chúng tôi không hoạt động bình thường thì trang sẽ tải lại mà không hiển thị cảnh báo. Sự cố này xảy ra khi sự kiện.preventDefault() không được gọi đúng cách, có thể do logic xác thực không phát hiện trường đã xóa là không hợp lệ. Bằng cách đảm bảo rằng quá trình xác thực JavaScript sẽ kiểm tra các trường trống một cách linh hoạt, bạn có thể tránh được vấn đề này. Ngoài ra, logic xác thực cần giải quyết các vấn đề không đồng bộ tiềm ẩn có thể khiến biểu mẫu tải lại trước khi quá trình kiểm tra hoàn tất.

Cuối cùng, xác thực phía máy chủ, được triển khai trong C# bằng cách sử dụng ModelState.AddModelError(), hoạt động như một phương án dự phòng khi quá trình xác thực phía máy khách không thành công hoặc bị bỏ qua. Mặc dù JavaScript xử lý hầu hết các tác vụ xác thực, nhưng xác thực phía máy chủ đảm bảo rằng không có dữ liệu không đầy đủ hoặc không chính xác nào được gửi tới máy chủ. Cách tiếp cận hai lớp này, sử dụng cả xác thực mặt trước và mặt sau, đảm bảo hiệu suất và bảo mật xác thực biểu mẫu tối ưu. Với thiết lập này, chúng tôi có thể tin tưởng rằng chỉ dữ liệu hợp lệ mới được xử lý trong khi vẫn giữ được biểu mẫu thân thiện với người dùng và nhanh chóng.

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allFilled = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      allFilled = false;
      break;
    }
  }
  if (!allFilled) {
    alert("All fields are required.");
    event.preventDefault();
    return false;
  }
  return true;
}

[HttpPost]
public IActionResult SaveForm(ModelExample model)
{
  if (string.IsNullOrEmpty(model.Name) ||
      string.IsNullOrEmpty(model.Name2) ||
      string.IsNullOrEmpty(model.Name3))
  {
    ModelState.AddModelError("", "All fields must be filled.");
    return View(model);
  }
  // Continue processing
  return RedirectToAction("Success");
}

function validateForm(event) {
  const form = document.getElementById('MyForm');
  let textAreas = form.querySelectorAll('textarea');
  let allValid = true;
  for (let i = 0; i < textAreas.length; i++) {
    if (textAreas[i].value.trim() === "") {
      textAreas[i].classList.add('is-invalid');
      allValid = false;
    } else {
      textAreas[i].classList.remove('is-invalid');
    }
  }
  if (!allValid) {
    event.preventDefault();
    alert("Please fill in all required fields.");
    return false;
  }
  return true;
}

[Fact]
public void TestFormValidation() {
  var controller = new MyController();
  var model = new ModelExample { Name = "", Name2 = "Valid", Name3 = "" };
  var result = controller.SaveForm(model);
  Assert.True(controller.ModelState.ContainsKey(""));
  Assert.Equal("All fields must be filled.",
                controller.ModelState[""].Errors[0].ErrorMessage);
}

Khám phá các kỹ thuật xác thực biểu mẫu JavaScript không đồng bộ

Một khía cạnh mà chúng tôi chưa đề cập đến là vai trò của việc xác thực không đồng bộ trong việc xử lý biểu mẫu. Xác thực không đồng bộ cho phép nhà phát triển kiểm tra các trường biểu mẫu mà không chặn trải nghiệm người dùng. Ví dụ: bạn có thể xác thực tính duy nhất của tên người dùng hoặc kiểm tra xem email có tồn tại trong thời gian thực hay không bằng cách gửi yêu cầu đến máy chủ ở chế độ nền mà không cần tải lại trang. Phương pháp này có thể được thực hiện bằng cách sử dụng JavaScript tìm nạp API hoặc AJAX. Cả hai phương pháp đều giúp nâng cao trải nghiệm người dùng bằng cách đưa ra phản hồi ngay lập tức.

Trong bối cảnh xác thực biểu mẫu, các yêu cầu không đồng bộ cho phép trang duy trì tính tương tác trong khi chờ phản hồi của máy chủ. Điều này có thể hữu ích khi làm việc với các tập dữ liệu lớn hoặc nhiều quy tắc xác thực, chẳng hạn như kiểm tra xem văn bản được nhập vào một trường có tuân thủ định dạng cụ thể trong khi tiếp tục xác thực các trường khác hay không. Kết hợp xác thực giao diện người dùng và xác thực không đồng bộ, nhà phát triển có thể nâng cao độ mạnh mẽ của xác thực biểu mẫu đồng thời cải thiện thời gian tải trang. Chìa khóa ở đây là chỉ kích hoạt yêu cầu không đồng bộ khi cần thiết để tránh làm máy chủ bị quá tải.

Khi sử dụng xác thực không đồng bộ trong môi trường C#, bạn cũng nên đảm bảo rằng xác thực phía máy chủ đóng vai trò dự phòng. Vì việc xác thực phía máy khách có thể bị bỏ qua bằng cách tắt JavaScript nên hãy luôn xác minh thông tin đầu vào ở phía máy chủ. Điều này đảm bảo rằng không có dữ liệu không hợp lệ nào lọt qua. Tận dụng xác thực không đồng bộ cùng với JavaScript truyền thống có thể giúp đạt được trải nghiệm an toàn và thân thiện với người dùng, đặc biệt khi kết hợp với các kỹ thuật xử lý lỗi và tối ưu hóa hiệu suất thích hợp.