Bizim web formları gerçekten karmaşıktır. Genişletilebilir form doğrulama için mükemmel bir çözüm dil eklentisi ile çalışan tercihen neydi?

Arka plan:

Sitemizde Ajax biraz, ama çok sayfalı 20 formları veya "sihirbazlar." kullanıcı deneyimi üzerinde gerçek bir odak vardır Bu form karışık.

• Sunum:Bazı alanlar yüzen ya da değer vermez. Doğrulama olmayan ondalık karakter sıyırma anlamına gelir, ama aynı zamanda, eğer bir kullanıcı bir fiyat alana 5 girerse, alan 5.00 güncelleştirilmiş olduğundan emin olmak istiyorum.
• Yan etkileri:Bazı alanlar güncelleştirilmiş zaman yan etkileri vardır. E. g., bir ürünün fiyatı veya miktarı güncellenmesi toplam bir alanı güncelleştirmek gerekiyor.
• Widget-tahrik elemanlarıBazı alanlar gizli ve değerleri widget tarafından doldurulan. E. g., göster bir parçacık bir konuma işaret sağlar ve gizli bir alan enlem ve boylam koordinatları ile güncellenir, ama yeri belli bir bölge içinde olmalıdır.
• Gruplar:Bazı alanlar grupları/şehir/Eyalet/posta adresi gibi, ve sadece tüm alanları arı doldurulan zaman kontrol edilmeli.
• Sunucu tarafında doğrulama:Bazı alanların kontrolü arka uç Ajax istekleri ile kontrol gerektirir
• Sayfa başına: birden fazla formBazen bir kullanıcı bir form bir iletişim başka bir form ile açılmadan önce doldurmanız gerekiyor. Bir çerçeve onSubmit — biz bazen aynı anda aynı sayfada Ajax kullanarak sırayla birden fazla form post bağlama daha çok yönlü olmak zorunda. (E. g., kullanıcıların kayıt izin verdik ve bir çırpıda bir widget oluşturun ama, eski sistemleri nedeniyle, bu akış iki POST istekleri gerektirir.)
• Hata ekran özelleştirilebilir:Bazen hatalar alanlar üzerinde görünür, bazen saha tarzı değişiklikleri ve yeni tasarımlar tooltip-pop-up (ala qTip) bazı hatalar için arayın.
• Snappiness:Kullanıcı deneyimi anahtarı ve dokunsal geribildirim önemlidir. Herhangi bir çözüm
• Düğmeleri gönderin:Bu butonu her şeyi doğrulamak ve bir tepki göstermek gerekiyor teslim — aynı zamanda bir doğrulama bazıları uyumsuz oluyor.

Şu anda jQuery Validation kütüphane kullanıyoruz ama bizim form özelliği için büyümüş gibi görünüyor. <angular/>, Knockout Backbone.js gibi şeyler bakıyordum ama çok ağır olduklarını veya bizim arayüzü yeniden yazmak gerekir diye korkuyorum.

(Bu topluluk wiki olmalıdır.)

Bu utanmaz bir eklentidir, ama ben framework gönüllü tasarladım bu olabilir mi? Ek açıklamalar (la Hazırda bir Doğrulayıcı) dayalı inşa ettik. Özel kısıtlamalar için destek ve çok güçlü olduğunu hissediyorum. Here de çerçevesinde bir inceleme için sordum nerede Stackoverflow bir soru.

• Sunum: Doğrulama kısıtlamaları özel, değiştiğinde eleman doğrulama bağlayabilirsiniz. Regula özel elemanları destekler, çünkü aynı zamanda, özel doğrulayıcı bir alan güncelleme değeri (5.00 10 *değişim) olabilir.
• Yan etkileriDestekler : yan etkiler özel) kısıtlaması katılmak. Regula
• Gruplar: Regula doğrulama grupları destekler. Doğrulama için belirli grupları hedef olabilir. Özel bir doğrulayıcı ve bir grup bir araya getirerek, doğrular, böylece doğrulayıcı davranışını kontrol edebilirsinizsadecegrubun tüm elemanları (normal Javascript ile bu kontrol rağmen gerçekleştirmek zorunda) dolu olduğunda.
• Sunucu tarafında doğrulama: Özel kısıtlamaları ile, bir AJAX çağrısı sunucu tarafı doğrulama gerçekleştirmek için yapabilirsiniz. Çerçevesinde yapılandırılmıştır yolu ile şu anda, bu mutlaka ajax-arama engelleme olmalı. Gelecekte zaman uyumsuz bir özellik ekleyerek planlıyorum.
• Sayfa başına Multiplee oluşturur: - Sayfa başına bir form doğrulama ile sınırlı değil. Birden fazla form (eğer gereği doğru anladıysam - yani bu kısmı doğru cevap olmayabilir ama emin değil) işleyebilir.
• Hata ekran özelleştirilebilir:Regula sayfanın UI için bir doğrulama gelince yapmaz. Doğruladığınızda, hata iletileri ve bu içeren kısıtlama ihlalleri bir dizi olsun. Bunları görüntülemek için nasıl size kalmış.
• Snappiness:Herhangi kriterler hiç sahneye çıkmadım, benim çerçeve performans olarak bu konuda yorum yapamam.
• Düğmeleri gönderin:Bu henüz çözmek zorunda olduğum bir şey (senkron asenkron vs).

İşte birkaç örnek:

Aşağıdaki standart doğrulama, yerleşik kısıtlamaları ile gösterir:

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

jQuery(document).ready(function() {
    // must call regula.binnd() first. The best place would be in an
    // onload handler. This function looks for elements with
    // a class name of "regula-validation" and binds the
    // appropriate constraints to the elements

    regula.bind(); 

    jQuery("#myForm").submit(function() {
        // this function performs the actual validation
        var validationResults = regula.validate();

        for(var index in validationResults) {
             var validationResult = validationResults[index];
             alert(validationResult.message);
        }
    });
});

Gördüğünüz gibi, sadece bir kısıtlama ihlali ile çalışıyoruz ve hata iletisi görüntüler bu şekilde tamamen size kalıyor.

Burada özel bir kısıtlama bir örnek:

regula.custom({
   name: "MustBe42",
   defaultMessage: "The answer must be equal to 42",
   validator: function() {
      return this.value == 42;
   }
});

Ve kullanımı:

<input id = "theAnswerToLifeTheUniverseAndEverything" 
       name = "theAnswerToLifeTheUniverseAndEverything" 
       value = ""
       class = "regula-validation"
       data-constraints = "@MustBe42" />

Doğrulama Javascript bir işlevi olduğundan, bu yan etkiler hakkında soru adresleri) yapmak olabilir.

Burada parametreleri kabul eden başka bir kısıtlama bir örnek:

regula.custom({
   name: "DivisibleBy",
   defaultMessage: "{label} must be divisible by {divisor}",
   params: ["divisor"],
   validator: function(params) {
      var divisor = params["divisor"];
      return (this.value % divisor) == 0;
   }
});

Ve kullanımı:

<input id = "number" 
       name = "number" 
       value = ""
       class = "regula-validation"
       data-constraints = "@DivisibleBy(divisor=3, label='The Number')" />

Burada doğrulama grupları kullanarak bir örnek:

<input id = "score"
       name = "score"
       type = "text"
       class = "regula-validation"
       data-constraints = '@IsNumeric(label="Score", 
                                      message="{label} needs to be a number!"
                                      groups=[FirstGroup, SecondGroup, ThirdGroup]' />

<input id = "age"
       name = "age"
       type = "text"
       class = "regula-validation"
       data-constraints = '@IsNumeric(label="Age", 
                                      message="{label} needs to be a number!"
                                      groups=[SecondGroup]' />

<input id = "name"
       name = "name"
       type = "text"
       class = "regula-validation"
       data-constraints = '@NotEmpty(label="Name", 
                                     message="{label} cannot be empty!"
                                     groups=[FirstGroup]' />

Ve sadece FirstGroup doğrulayan bir parçacık (yani sadece score name doğrulanır):

var constraintViolations = regula.validate({groups: [regula.Group.FirstGroup]});
var messages = "";

for(var index in constraintViolations) {
      var constraintViolation = constraintViolations[index];
      messages  = constraintViolation.message   "\n";
}

if(messages != "") {
   alert(messages);
}

Eğer denemek planlıyorsanız, indirme sürümü tavsiye ederim1.1.1. Geçerli belge sürümü özellikle maçlar.1.2.1Bileşik kısıtlamalar için destek eklendi, ama benim belgelere yansıtmak için güncelleme yapmadım.

Eğer tüm endişeleri gidermek değilse, ya da eğer bu aradığınız ne ise anlıyorum. Sadece açıkla dedim. Eğer kontrol ederseniz de, o sürümü yansıtacak şekilde belgelere güncellemek için emin olacağım1.2.1. Okul ve iş ile meşguldüm ve bu yüzden bunu yapmak için zamanım olmadı.

GÜNCELLEME #1

Sohnee istemci taraflı doğrulama bahsetti. Aslında Regula ve Bahar 3 arasında bir entegrasyon üzerinde çalışıyorum. Umarım yakında yine iş ve okul olarak serbest bırakmak gerekir. Entegrasyon Hazırda doğrulama-doğrulama kısıtlamaları kısıtlamaları Regula çevirerek çalışıyor. Bu şekilde, sadece doğrulama kodu yazmak için bir kez (çoğunlukla). Özel kısıtlamaları rağmen, hala Javascript tarafında kod (özel doğrulayıcı) yazmak gerekir. Fakat bir kere açıklama kod sunucu tarafı ile Hazırda doğrulama kısıtlamaları, ihtiyacın yok bir şey yapmak için istemci tarafı; bu kısıtlamaları otomatik olarak uygulanan biçim öğeleri üzerinde istemci tarafı.

Matthew Abbott 31 ** mümkün olmuştur.

GÜNCELLEME #2

Vitrinde Regula bütünleşmesi ve Bahar 3.0 demo bir Web uygulaması (mavenized) on github var.x MVC Hazırda Doğrulayıcı kullanarak Web. Gerçekten belgelenmiş falan değil, daha çok kavram kanıtı. Github sayfası nasıl çalışır entegrasyonu hakkında ve bazı belgeler eklemek için planlıyorum.

GÜNCELLEME #3

wiki belgelerine güncelledik ve şimdi en son sürümüne karşılık gelir1.2.2(Bu yüzden küçük bir hata düzeltme yaptım1.2.2şimdi).