Kịch bản xác thực biểu mẫu jQuery đơn giản

Question

Tôi đã tạo biểu mẫu xác thực đơn giản bằng cách sử dụng jQuery. Nó hoạt động ổn. Vấn đề là tôi không hài lòng với mã của tôi. Có cách nào khác xung quanh để viết mã của tôi với kết quả đầu ra tương tự?

$(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

Bạn chỉ có thể sử dụng the jQuery Validate plugin như sau.

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/

Options:http://jqueryvalidation.org/validate

Phương pháp:http://jqueryvalidation.org/category/plugin/

Nội quy chuẩn: http://jqueryvalidation.org/category/methods/

Quy định bắt buộc sẵn với 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

bạn có thể sử dụng trình xác thực jquery cho điều đó nhưng bạn cần phải thêm tệp jquery.validate.js và jquery.form.js cho điều đó. sau khi bao gồm tệp trình xác thực xác định xác thực của bạn như thế này.

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

Bạn có thể thấy required : true cùng có nhiều tài sản hơn như cho email mà bạn có thể định nghĩa email : true cho số number : true