Khuôn khổ xác thực biểu mẫu Javascript: Yêu cầu xem xét

Question

Tôi không chắc liệu tôi có thể hỏi loại câu hỏi này hay không, nhưng sau khi nhìn thấy this trên Meta Stackoverflow, có vẻ như loại câu hỏi này là ok. Vâng, vào câu hỏi của tôi:

Một vài tháng trước, tôi đã viết một khung xác thực trong Javascript. Tôi biết rằng đã tồn tại các khuôn khổ xác nhận như jQuery Validation, nhưng tôi muốn thực hiện một cách tiếp cận khác để xác thực. Cách tiếp cận hiện tại đối phó với việc viết mã Javascript để thực hiện xác nhận trên các phần tử biểu mẫu. Bằng cách nhìn vào mã nguồn của biểu mẫu, nó không phải là ngay lập tức hiển nhiên những gì xác nhận xảy ra trên mỗi phần tử. Ở một mức độ nào đó, điều này có thể được khắc phục bằng cách sử dụng các lớp CSS chỉ định các loại xác nhận khác nhau. Nhưng tôi cảm thấy rằng ngay cả điều này cũng bị hạn chế vì bạn không thể dễ dàng tùy chỉnh hành vi của validaton (thông báo lỗi, v.v.). Tôi muốn làm điều gì đó như xác nhận dựa trên chú thích trong Java bằng cách sử dụng JSR-303 Bean Validation hoặc Hibernate Validator.

Vì HTML5 cho phép bạn thêm các thuộc tính tùy chỉnh vào một phần tử, tôi đã tìm ra rằng tôi có thể tận dụng các yếu tố biểu mẫu "chú thích" để xác thực. Vì vậy, về cơ bản, tôi đã đưa ra với điều này:

<input id = "myInput" 
     name = "myInput" 
     type = "text" 
     class = "regula-validation" 
     data-constraints = '@NotEmpty @IsNumeric @Between(min=1, max=5)' /> 

Với ý tưởng cơ bản này trong tâm trí, tôi đã tạo ra một khuôn khổ Javascript rằng:

• Kiểm tra các DOM cho các yếu tố đó có những hạn chế xác định và liên kết với những khó khăn này đến các yếu tố
• cho phép tạo ra các hạn chế tùy chỉnh
• cho phép chương trình ràng buộc của chế
• chế xác nhận bị ràng buộc

Bên cạnh đó, khuôn khổ có các tính năng sau:

• nhóm Validation, tương tự như quy định tại JSR-303
• Interpolation cho các thông báo lỗi

Khi tôi tạo ra khuôn khổ của tôi Tôi đã cố gắng để có được thông tin phản hồi và xem xét cho nó nhưng tôi đã không chắc chắn nơi để đi để có được thông tin phản hồi và xem xét. Tôi đã viết một vài bài đăng trên blog về nó và đăng nó lên Digg và Reddit (phần lập trình) mà không có nhiều may mắn. Một vài người dường như quan tâm, nhưng tôi đã không nhận được nhiều hơn thế.

Gần đây, tại nơi làm việc của chúng tôi, chúng tôi đã hiện đại hóa một codebase cũ (JSP và servlet) và di chuyển nó vào Spring MVC. Khi cuộc hội thoại xác nhận được đưa ra, tôi đã mở rộng khung làm việc của mình cho kiến ​​trúc sư cấp cao của tôi. Tôi đã làm một chút tích hợp và bằng chứng về khái niệm và họ có vẻ quan tâm và đã cho tôi đi trước để thêm nó vào dự án. Cho đến bây giờ, tôi chỉ có ý kiến ​​khiêm nhường của riêng mình rằng đây sẽ là một cách hữu ích để xác nhận, vì vậy điều này đã cho tôi một số tự tin rằng ý tưởng và khuôn khổ của tôi có thể có một số công đức. Tuy nhiên, tôi vẫn cần một số sự tham gia và khuôn khổ hơn nữa. Sau khi tôi đã tìm ra rằng Stackoverflow không cho phép các loại câu hỏi này, tôi quyết định đăng nó lên đây để nhận được một số lời chỉ trích, nhận xét và phản hồi mang tính xây dựng.

Vì vậy, không chậm trễ hơn nữa, tôi muốn giới thiệu Regula. Liên kết mà tôi đã cung cấp đi đến một wiki trên GitHub có tất cả tài liệu cho khung công tác. Bạn có thể tải xuống phiên bản mới nhất (v1.1.0) từ here.

Mong nhận xét của bạn.

Một số thông tin bổ sung mà không phải là ngay lập tức có liên quan

tôi đã đùa giỡn với ý tưởng tích hợp khuôn khổ của tôi với mùa xuân, nghĩa là, dịch chú thích xác nhận về đậu vào xác nhận client-side. Gần đây tôi đã có thể làm điều này để làm việc, ngay cả với các nhóm xác nhận (mặc dù hiện không có hỗ trợ cho quan hệ thừa kế giữa các nhóm ở phía máy khách). Bằng cách này, bạn chỉ cần chú thích các thuộc tính trường với các ràng buộc xác nhận hợp lệ và mã xác nhận phía máy khách được tạo tự động. Tuy nhiên, tôi là một người mới vào mùa xuân và vì vậy phương pháp của tôi có lẽ không phải là sạch sẽ. Tôi cũng muốn nhận được phản hồi về điều này, vì vậy nếu có ai quan tâm, vui lòng cho tôi biết. Lý tưởng nhất (và tôi hy vọng tôi không quá kiêu căng) Tôi muốn liên lạc với những người mùa xuân và xem họ có quan tâm đến điều này không.

Answer 1

Tôi thích nó rất nhiều, nó giữ html của tôi sạch sẽ và khả năng xây dựng trình xác nhận tùy chỉnh là rất tốt. Một điều tôi nói thêm là một tay viết tắt của ràng buộc xác nhận và nộp chức năng, và quấn nó lên như là một plugin jQuery:

if (jQuery) { 
    (function($) 
    { 
     $.regula = function(formId, callback) 
     { 
      regula.bind(); 

      $("#" + formId).submit(function() 
      { 
       var validationResults = regula.validate(); 

       if (validationResults.length > 0) 
       { 
        if (callback) 
         callback(validationResults); 

        return false; 
       } 

       return true; 
      }); 
     }; 
    })(jQuery); 
} 

Infact, tôi đã chỉ blogged về nó là tôi mà ấn tượng với cách sạch và dễ dàng. Tôi vẫn sẽ dành nhiều thời gian đi qua nguồn của bạn, để xem cách bạn hoàn thành nó, nhưng đó là một khởi đầu tuyệt vời :)

Về việc tích hợp khung công tác của bạn, tôi làm việc chủ yếu với ASP.NET MVC, và nó sẽ thú vị để xem cách nó dịch logic xác thực phía máy chủ thành các ràng buộc phía máy khách. Một cái gì đó tôi có thể xem xét trong tháng tới hay như vậy.