验证表单时出错

时间:2013-11-20 04:58:14

标签: javascript php jquery codeigniter

当我使用Jquery验证表格中的值get时,我遇到了麻烦。

$('form').submit(function(){
     var err = [];
     var form = $(this).attr('id');
     switch(form){
          case 'formmecard':
               var hasError = 3;
            if($('#me-name').val() == ''){
                err[0] = 'Please input your full name';
            }else{
                if(!nameReg.test($('#me-name').val())){
                    err[0] = 'Your name has only contain characters';
                }else{
                    hasError--;
                }
            }
            if($('#me-email').val() == ''){
                err[1] = 'Please input your email address';
            }else{
                if(!emailReg.test($('#me-email').val())){
                    err[1] = 'Invalid email address';
                }else{
                    hasError--;
                }
            }
            if($('#me-phone').val() == ''){
                err[2] = 'Please input your phone number';
            }else{
                if(!numberReg.test($('#me-phone').val())){
                    err[2] = 'The phone number is invalid';
                }else{
                    hasError--;
                }
            }

            if(hasError != 0){
                for(var i=0;i<err.length;i++){
                    switch(i){
                        case 0:
                            $('.checkname').html(err[0]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#me-name').focus();
                            break;
                        case 1:
                            $('.checkemail').html(err[1]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#me-email').focus();
                            break;
                        case 2:
                            $('.checkphone').html(err[2]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#me-phone').focus();
                            break;
                        default:
                            break;
                    }
                }
                err = [];
            }else{
                var website = $('#me-url').val();
                if(website != ''){
                    if(!website.match(urlReg))
                        $('#me-url').val('http://' + website);
                }
                var content = $(this).serialize();
                var action = $(this).attr('action');
                callajax(action,content);
            }
            break;
          default:
            break;
     }
  return false;
});

当我测试该功能时,它的构建没有任何问题。但是当我添加一个案例来实现它的错误

case 'formvcard':
            var hasError = 3;
            var name = $('#v-name').val();
            if(name == ''){
                err[0] = 'Please input your full name';
            }else{
                if(!nameReg.test(name)){
                    err[0] = 'Your name has only contain characters';
                }else{
                    hasError--;
                }
            }
            var email = $('#v-email').val();
            if(email == ''){
                err[1] = 'Please input your email address';
            }else{
                if(!emailReg.test($(email)){
                    err[1] = 'Invalid email address';
                }else{
                    hasError--;
                }
            }
            var phone = $('#v-phone').val();
            if(phone == ''){
                err[2] = 'Please input your phone number';
            }else{
                if(!numberReg.test(phone)){
                    err[2] = 'The phone number is invalid';
                }else{
                    hasError--;
                }
            }

            if(hasError != 0){
                for(var i=0;i<err.length;i++){
                    switch(i){
                        case 0:
                            $('.checkname').html(err[0]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#v-name').focus();
                            break;
                        case 1:
                            $('.checkemail').html(err[1]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#v-email').focus();
                            break;
                        case 2:
                            $('.checkphone').html(err[2]).fadeIn(1000,function(){
                                $(this).fadeOut(1000);
                            });
                            $('#v-phone').focus();
                            break;
                        default:
                            break;
                    }
                }
                err = [];
            }else{
                var website = $('#v-url').val();
                if(website != ''){
                    if(!website.match(urlReg))
                        $('#v-url').val('http://' + website);
                }
                var content = $(this).serialize();
                var action = $(this).attr('action');
                callajax(action,content);
            }
            break;

我使用方法post将数据提交给服务器但是当我将这种情况添加到我的函数时,当使用方法获取提交数据时出现错误。请帮我解决我的问题。

1 个答案:

答案 0 :(得分:0)

为什么不尝试以其他方式执行此操作?,例如使用提交按钮并监听click事件并使用preventdefault方法,这样您就可以在表单提交之前验证表单< / p>

$("#buton").click(function(e)
{
   e.preventDefault();

  /*
    your validations here
  */

  //to finalize

  $("#yourform").submit();
});