単純なjQueryフォーム検証スクリプト

Question

jQueryを使用して簡単な検証フォームを作成しました。大丈夫です。私のコードには満足できません。同じ出力結果を持つコードを書く別の方法がありますか？

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

ためemail : trueを定義することができ、電子メールのためのような、より多くのプロパティがあり、同じrequired : trueを見ることができます。

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/

オプション：http://jqueryvalidation.org/validate

方法：http://jqueryvalidation.org/category/plugin/

基準規則：http://jqueryvalidation.org/category/methods/

オプションルール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

あなたはそのためのjQueryのバリデータを使用できますが、そのためにjquery.validate.jsとjquery.form.jsファイルを追加する必要があります。バリデータファイルを含めた後にバリデーションを定義します。

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

あなたは次のように、単にthe jQuery Validate pluginを使用することができます数number : true