一个简单的jQuery表单验证脚本
一个简单的jQuery表单验证脚本
提问于 2013-02-25 12:46:43
我用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>');
}
}
});回答 1
Stack Overflow用户
发布于 2013-02-25 12:53:23
您可以使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15060292
复制相关文章
相似问题