Un simplu script de validare a formularului jQuery [închis] (Programare, Jquery, Validare)

jhedm a intrebat.

Am realizat un simplu formular de validare folosind jQuery. Funcționează în regulă. Problema este că nu sunt mulțumit de codul meu. Există o altă modalitate de a scrie codul meu cu același rezultat de ieșire?

$(document).ready(function(){

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

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([w-.][email protected]([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>');
        }       
}   

});

Comentarii

  • da , puteți utiliza scriptul de validare jquery pentru a-l face mai bun. –  > Por Devang Rathod.
  • îmi puteți arăta cum? Se spune că a scrie un cod este ca și cum ai scrie o poezie. Vreau ca codul meu să fie optimizat. –  > Por jhedm.
  • codereview.stackexchange.com – este ceea ce cauți –  > Por Alexander.
  • Puteți folosi validarea formularului HTML5: $('form')[0].checkValidity() –  > Por niutech.
  • dacă obiectivul principal este simplitatea, valijate jquery plugin este promițător. este un plugin de pornire. dar, folosește un mod interesant de validare. aici este linkul pentru ghidul de acolo. valijate.com/Docs.php –  > Por bula.
2 răspunsuri
Sparky

Puteți folosi pur și simplu plugin-ul jQuery Validate după cum urmează.

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/

Opțiuni: http://jqueryvalidation.org/validate

Metode: http://jqueryvalidation.org/category/plugin/

Reguli standard: http://jqueryvalidation.org/category/methods/

Reguli opționale disponibile cu additional-methods.js fișier:

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

Devang Rathod

puteți utiliza validatorul jquery pentru asta, dar trebuie să adăugați fișierul jquery.validate.js și jquery.form.js pentru asta. după ce ați inclus fișierul validator definiți validarea dvs. ceva de genul acesta.

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

Puteți vedea required : true același lucru există multe alte proprietăți, cum ar fi pentru e-mail puteți defini email : true pentru număr number : true

Comentarii

  • validatorul jQuery este bun, dar cred că un validator care ia în considerare noile caracteristici de validare HTML5 este chiar mai bun, de ex. ericleads.com/h5validate. –  > Por Matt Browne.
  • @MattB., Nu am auzit niciodată de acesta, dar jQuery Validate plugin ia în considerare și caracteristicile HTML5, , deși nu sunt sigur de ce ai avea nevoie / vrei să le folosești pe amândouă împreună. –  > Por Sparky.
  • Devang, jquery.form.js este nu este necesar pentru a utiliza codul pe care l-ați arătat. –  > Por Sparky.
  • @Sparky Cu excepția cazului în care nu aveți o anumită estetică deja concepută care vă place foarte mult pentru mesajele de validare, permiterea unui browser care suportă HTML5 să afișeze mesajele de validare în mod implicit este adesea mai plăcută, unde pluginul de validare este folosit doar ca o soluție de rezervă pentru afișarea mesajelor de eroare pe browserele mai vechi și pentru logica de validare pe care HTML5 nu o suportă (fără Javascript suplimentar). Dar aceasta este mai mult preferința mea personală decât orice altceva. –  > Por Matt Browne.
  • @MattB., de obicei, oamenii care folosesc jQuery caută coerența între browsere pe care o obțineți prin îndepărtarea de caracteristicile browserului care variază foarte mult de la o marcă la alta. De asemenea, prefer să rămân la pluginuri populare care au o bază uriașă de suport, iar dacă dezvoltatorul face parte, de asemenea, din echipa jQuery, , cu atât mai bine, IMO. –  > Por Sparky.