Prosty skrypt sprawdzania poprawności formularza jQuery

Question

Zrobiłem prosty formularz sprawdzania poprawności za pomocą jQuery. Działa dobrze. Chodzi o to, że nie jestem zadowolony z mojego kodu. Czy istnieje inny sposób na napisanie kodu z tym samym wynikiem wyjściowym?

$(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>'); 
     }  
} 

}); 

Answer 1

można po prostu użyć the jQuery Validate plugin następująco.

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/

Opcje:http://jqueryvalidation.org/validate

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

Standardowe Zasady: http://jqueryvalidation.org/category/methods/

opcjonalne zasady dostępny z additional-methods.js file:

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 

Answer 2

można użyć jQuery walidator za to, ale trzeba dodać jquery.validate.js i jquery.form.js plik za to. po włączeniu pliku walidatora określ swoją walidację w taki sposób.

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

Widać required : true samo istnieje wiele innych nieruchomość jak na e-mail można określić email : true dla numeru number : true