一个简单的jQuery表单validation脚本

我使用jQuery做了一个简单的validation表单。 它工作正常。 事情是我不满意我的代码。 有没有另外一种方法来写我的代码与相同的输出结果？

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

你可以简单地使用jQuery Validate插件如下。

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文件提供的可选规则 ：

 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

你可以使用jQueryvalidation器，但你需要添加jquery.validate.js和jquery.form.js文件。 包含validation器文件后，定义你的validation是这样的。

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

你可以看到required : true同样有更多的属性，比如电子邮件，你可以定义email : true为数字number : true