您的位置:首页 > Web前端 > JQuery

JQ验证表单

2016-05-27 16:34 543 查看
一、引入jq

二、示例代码

jQuery(document).ready(function(){
$('#cform img.contact-loader').hide();

$('#cform').submit(function(){

//验证信息
if($('#name').val() == ""){
$("#name").parent().addClass("error");
$("#message").html("请填写你的姓名!").show().addClass("error");
$("name").focus();
return false;
}

if($('#email').val() == ""){
$("#email").parent().addClass("error");
$("#message").html("请填写你的邮箱!").show().addClass("error");
$("#email").focus();
return false;
}
if($('#title').val() == ""){
$("#title").parent().addClass("error");
$("#message").html("请填写你的姓名!").show().addClass("error");
$("#title").focus();
return false;
}
if($('#content').val() == ""){
$("#content").parent().addClass("error");
$("#message").html("请填写你的留言!").show().addClass("error");
$("#content").focus();
return false;
}

var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(!pattern.test($('#email').val())){
$("#email").parent().addClass("error");
$("#message").html("邮箱格式不正确!").show().addClass("error");
$("#email").focus();
return false;
}

var action = $(this).attr('action');

$("#message").slideUp(750,function() {
$('#message').hide().removeClass("error");

$('#submit').attr('disabled','disabled');
$('#cform img.contact-loader').show();
$("#cform fieldset").removeClass('error');

$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
subject: $('#title').val(),
comments: $('#content').val()
},
function(data){
document.getElementById('message').innerHTML = data.info;
$('#message').slideDown('slow').addClass("success");
$('#cform img.contact-loader').fadeOut('slow',function(){$(this).remove();});
$('#submit').removeAttr('disabled');
if(data.status == 1) {
document.getElementById('cform').reset();
$('#cform').slideDown('slow');
}
}
);
});

return false;

});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 表单