Basit bir jQuery form doğrulama komut dosyası [kapalı]


110

JQuery kullanarak basit bir doğrulama formu yaptım. Tamam çalışıyor. Sorun şu ki, kodumdan memnun değilim. Kodumu aynı çıktı sonucuyla yazmanın başka bir yolu var mı?

$(document).ready(function(){

$('.submit').click(function(){
    validateForm();   
});

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();

    var inputVal = new Array(names, company, email, telephone, message);

    var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

     $('.error').hide();

        if(inputVal[0] == ""){
            $('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
        } 
        else if(!nameReg.test(names)){
            $('#nameLabel').after('<span class="error"> Letters only</span>');
        }

        if(inputVal[1] == ""){
            $('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
        }

        if(inputVal[2] == ""){
            $('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
        } 
        else if(!emailReg.test(email)){
            $('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
        }

        if(inputVal[3] == ""){
            $('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
        } 
        else if(!numberReg.test(telephone)){
            $('#telephoneLabel').after('<span class="error"> Numbers only</span>');
        }

        if(inputVal[4] == ""){
            $('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
        }       
}   

});

3
evet, daha iyi hale getirmek için jquery doğrulama komut dosyasını kullanabilirsiniz.
Devang Rathod

bana nasıl olduğunu gösterebilir misin Kod yazmanın şiir yazmak gibi olduğunu söylüyorlar. Kodumun optimize edilmesini istiyorum.
jhedm

10
codereview.stackexchange.com - aradığınız şey bu
Alexander

1
HTML5 form doğrulamasını kullanabilirsiniz:$('form')[0].checkValidity()
niutech

ana odak basitlikse, valijate jquery eklentisi umut vericidir. bu bir başlangıç ​​eklentisidir. ancak ilginç bir doğrulama yöntemi kullanır. İşte kılavuzun bağlantısı. valijate.com/Docs.php
bula

Yanıtlar:


300

JQuery Validate eklentisini aşağıdaki gibi kullanabilirsiniz .

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

DEMO: http://jsfiddle.net/xs5vrrso/

Seçenekler: http://jqueryvalidation.org/validate

Yöntemler: http://jqueryvalidation.org/category/plugin/

Standart Kurallar : http://jqueryvalidation.org/category/methods/

additional-methods.jsDosyayla birlikte kullanılabilen İsteğe Bağlı Kurallar :

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

19

bunun için jquery doğrulayıcısını kullanabilirsiniz, ancak bunun için jquery.validate.js ve jquery.form.js dosyasını eklemeniz gerekir. Doğrulayıcı dosyası ekledikten sonra doğrulamanızı buna benzer bir şey tanımlayın.

<script type="text/javascript">
$(document).ready(function(){
    $("#formID").validate({
    rules :{
        "data[User][name]" : {
            required : true
        }
    },
    messages :{
        "data[User][name]" : {
            required : 'Enter username'
        }
    }
    });
});
</script>

Görebilirsiniz required : true Tanımlayabileceğiniz e-posta için daha pek çok özellik vardır aynı email : true sayıda number : true


3
jQuery doğrulayıcı iyidir, ancak yeni HTML5 doğrulama özelliklerini hesaba katan bir doğrulayıcının daha da iyi olduğunu düşünüyorum, ör. ericleads.com/h5validate .
Matt Browne

@MattB., Bunu hiç duymadım, ama jQuery Validate eklentisi HTML5 özelliklerini de hesaba neden ikisini birlikte kullanmak istediğinizden emin değilim.
Sparky

1
Devang, jquery.form.jsolduğu gerekmez gösterdiğin kodunu kullanmak.
Sparky

@Sparky Doğrulama mesajlarını gerçekten beğendiğiniz belirli bir estetiğe sahip değilseniz, HTML5 destekli bir tarayıcının doğrulama mesajlarını varsayılan şekilde görüntülemesine izin vermek genellikle daha güzeldir, burada doğrulama eklentisi yalnızca hata mesajlarını görüntülemek için bir yedek olarak kullanılır eski tarayıcılarda ve doğrulama mantığı için HTML5 desteklemez (fazladan Javascript olmadan). Ancak bu, her şey kadar kişisel tercihimdir.
Matt Browne

1
@MattB., Tipik olarak jQuery kullanan kişiler, markadan markaya büyük ölçüde değişen tarayıcı özelliklerinden uzaklaşarak elde ettiğiniz tarayıcılar arası tutarlılığı arıyorlar. Ayrıca büyük bir destek tabanına sahip popüler eklentilere bağlı kalmayı tercih ederim ve eğer geliştirici de jQuery Ekibinin bir parçasıysa , daha iyisi, IMO.
Sparky
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.