JQ验证表单

待我称王封你为后i 2022-08-22 12:23 122阅读 0赞

一、引入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;
    
        });
    
    });