一个简单的 jQuery 表单验证脚本

我使用 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>');
}
}


});
720873 次浏览

您可以为此使用 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>

你可以看到 required : true 相同有许多更多的属性喜欢的电子邮件,你可以定义数字 number : true email : true

您可以像下面这样简单地使用 JQuery 验证插件

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/

选项: < a href = “ http://jqueryvalidation.org/valid”> http://jqueryvalidation.org/validate

方法: < a href = “ http://jqueryvalidation.org/type/plugin/”> http://jqueryvalidation.org/category/plugin/

标准规则 : < a href = “ http://jqueryvalidation.org/type/method/”> 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