简体   繁体   English

注册后无法通过验证

[英]Trouble with validation after registration

I'm doing a registration page. 我正在注册页面。 It requires the name, password, email, gender, nationality, date of birth and other things. 它要求提供姓名,密码,电子邮件,性别,国籍,出生日期等。

I did the registration and it was good. 我做了注册,很好。 But I need to add the validation and this is what I could do so far: 但是我需要添加验证,这是到目前为止我可以做的:

<?php include("config.php"); ?>
    <!DOCTYPE html>
    <html lang="en">

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css" type="text/css"/>
    <link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 

    <!-- JavaScript -->
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="js/validation.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
                    $('#datepicker').datepicker({
                        dateFormat:'dd/mm/yy',
                        changeMonth: true,
                        changeYear: true,
                        yearRange: '-90:+0',
                        maxDate: '+0'
                    });
        });
    </script>
    </head>

    <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
    <script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/cufon-replace.js"></script>
    <script type="text/javascript" src="js/Myriad_Pro_italic_600.font.js"></script>
    <script type="text/javascript" src="js/Myriad_Pro_italic_400.font.js"></script>
    <script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
    <!--[if lt IE 9]>
        <script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
        <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
    <?php $error_messages = array(
        'T1' => 'Please enter a Name to proceed.',
        'T2' => 'Please enter a valid Email Address to continue.',
        'T3' => 'Please enter your Message to continue.'
    ); 
    ?>
    </head>
    <body id="page2">
    <div class="body1">
        <div class="main">
    <!-- header -->
            <header>
                <div class="wrapper">
                    <h1><a href="index.html" id="logo">Air Lines</a><span id="slogan">International Travel</span></h1>
                    <div class="right">
                        <nav>
                            <ul id="top_nav">
                                <li><a href="index.html"><img src="images/img1.gif" alt=""></a></li>
                                <li><a href="index-4.html"><img src="images/img2.gif" alt=""></a></li>
                                <li class="bg_none"><a href="#"><img src="images/img3.gif" alt=""></a></li>





                            </ul>
                        </nav>
                        <nav>
                            <ul id="menu">
    <li><a href="index.php">Home</a></li>
                                <li  id="menu_active" ><a href="LSU.php">Login/sign up</a></li>
                                <li><a href="V&M.php">Vision and mission</a></li>

                                <li><a href="contact.php">Contacts</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
    </div>
    <div class="main">
        <div id="banner"></div>
    </div>
    <!-- header -->
    <div class="main">
    <!-- content -->
        <section id="content">
            <article class="col1">
                <div class="pad_1">
                    <h2>Login</h2>
                  <form id="form_1" action="login.php" method="post">

                        <div class="wrapper">
                            User Name:
                            <div class="bg"><input type="text" name="LogIn_Name" class="input input1" value="Enter your name" onblur="if(this.value=='') this.value='Enter your name'" onfocus="if(this.value =='Enter your name' ) this.value=''"></div>
                        </div>
                    <div class="wrapper">
                            Password:
                            <div class="bg"><input type="password" name="LogIn_Pass" class="input input1" value="Enter your password" onblur="if(this.value=='') this.value='Enter your password'" onfocus="if(this.value =='Enter your password' ) this.value=''"></div>
                      </div>
                      <div class="wrapper">

                        <h2 id="coq"> <a href="Forget.php">Forget Password</a></h2>

                          <input type="submit" class="button2" value="GO">
                    </div>
                    </form>



                    <h2>&nbsp;</h2>
                </div>
            </article>
            <article class="col2 pad_left1">
                <h2>Registration</h2>
                <div class="wrapper">
                    <figure class="left marg_right1"></figure>
                    <p> 

                                    <form id="form_1" action="" method="post">
    <div class="wrapperr"  >
    <?php 

    $username =  $_POST["T1"];
    $password =  $_POST["T2"];
    $repassword =  $_POST["T3"];
    $email =  $_POST["T4"];
    $gender =  $_POST["T5"];
    $Cou =  $_POST["T6"];
    $DO=  $_POST["T7"];
    $passport=  $_POST["T8"];
    $phone=  $_POST["T9"];

    {
    if((strlen($username)<3)){
    echo "The username is too short"."</br>";


    if((strlen($gender)<3)){
    echo "Gender"."</br>";
    }


    if((strlen($Cou)<2)){
    echo "The CO too short"."</br>";
    }


    if((strlen($phone)<5)){
    echo "The phone is too short"."</br>";
    }

    if((strlen($password)<5)){
    echo "The password is too short"."</br>";
    }
    }
    else{
    if($password == $repassword){
    $chec = mysql_query("SELECT * FROM register WHERE name='$username'"); 
    if(strlen($chec['name'])>0){
    echo "The username '$username' already exists";
    }
    else{
    $check_variable=stripos($email,"@");
    if($check_variable){

    $password=md5($password);
    mysql_query("INSERT INTO register (name,password,email,gender,country,DOB,phone,passport) VALUES ('$username','$password','$email','$gender','$Cou','$DO','$phone','$passport')");
    echo "Registration Successful .. Click <a href='index.php'> here </a> to home";
    }
    else{
    echo "email is invalid";
    }
    }
    }
    else{
    echo "The password in both field doesn't match.";
    }
    }
    }






    ?>
        </div>              <div class="wrapper">
                            Name:
                            <div class="bg"><input type="text" name="T1" class="input input1"  value="Enter your name" onblur="if(this.value=='') this.value='Enter your name'" onfocus="if(this.value =='Enter your name' ) this.value=''"></div>
                        </div>

                                            <div class="wrapper">
                            Password:
                            <div class="bg"><input type="password" name="T2"  class="input input1" value="Enter the password" onblur="if(this.value=='') this.value='Enter the password'" onfocus="if(this.value =='Enter the password' ) this.value=''"></div>
                        </div>


                                            <div class="wrapper">
                            Confirm password:
                            <div class="bg"><input type="password" name="T3" class="input input1" value="Confirm the password" onblur="if(this.value=='') this.value='Confirm the password'" onfocus="if(this.value =='Confirm the password' ) this.value=''"></div>
                        </div>

                                            <div class="wrapper">
                            e-mail:
                            <div class="bg"><input type="text" name = "T4" class="input input1" value="Enter your e-mail" onblur="if(this.value=='') this.value='Enter your e-mail'" onfocus="if(this.value =='Enter your e-mail' ) this.value=''"></div>
                        </div>


                        <div class="wrapper">
                            Gender:
                            <div class="bg">
                              <td>
                              <input type="radio" name="T5" value="Male">
                              Male
                              </td><td>
                               <input type="radio" name="T5" value="Female">
                              Female</td>


                          </div>
                        </div>


                                    <div class="wrapper">
                            NATIONALITY:
                              <div class="bg"><input type="text" name="T6" class="input input1" value="Enter your country" onblur="if(this.value=='') this.value='Enter your country'" onfocus="if(this.value =='Enter your country' ) this.value=''"></div>
                        </div>


                        <div class="wrapper">

                                                        <div class="wrapper">
                            Passport number:
                              <div class="bg"><input type="text" name="T8" class="input input1" value="Enter your passport number" onblur="if(this.value=='') this.value='Enter your passport number'" onfocus="if(this.value =='Enter your passport number' ) this.value=''"></div>
                        </div>


                        <div class="wrapper">


                            Date of birth:
                      <div class="wrapper">
                                <div class="bg left"><input type="text" name="T7" class="input input2" value="mm/dd/yyyy " onblur="if(this.value=='') this.value='mm/dd/yyyy '" onfocus="if(this.value =='mm/dd/yyyy ' ) this.value=''" id="datepicker"  >
                                  <br/><span id="bdayInfo"></span>

                        </div>
                                <div class="bg right"></div>
                            </div>
                        </div>
                        Phone number:
                                                <div class="wrapper">
                                <div class="bg left"><input type="text" name="T9" class="input input2" value="" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"></div>
                                <div class="bg right"></div>
                          </div>
                        </div>
                        <div class="wrapper">
                        <p>&nbsp;</p>
                      <input type="submit" class="button2" name="Go" value="GO">
                        </div>
                    </form>

                    </p>
                </div>
                <p>&nbsp;</p>
              <h2>&nbsp;</h2>
            </article>
        </section>
    <!-- / content -->
    </div>
    <div class="body2">
        <div class="main">
    <!--footer -->
            <footer>
                Website template designed by <a href="http://www.templatemonster.com/" target="_blank" rel="nofollow">www.templatemonster.com</a><br>
                3D Models provided by <a href="http://www.templates.com/product/3d-models/" target="_blank" rel="nofollow">www.templates.com</a>
            </footer>
    <!-- / footer -->
        </div>
    </div>
    <script type="text/javascript"> Cufon.now(); </script>
    </body>
    </html>

Always validate server side first ie in PHP (this is the point where it is required ). 始终首先验证服务器端,即在PHP中进行验证(这是必需的地方 )。

Then add JavaScript validation afterwards. 然后再添加JavaScript验证。 It is not required , but added to improve user expecrience. 不是必需的 ,但已添加以提高用户体验。 Any javascript can be circumnavigated (avoided) so if you don't have the PHP backup then you're leaving your self open for trouble. 任何JavaScript都可以绕行(避免),因此,如果您没有PHP备份,那么您会遇到麻烦。

Note, I'm not saying don't add JS validation, merely that you add PHP first, JS second. 注意,我并不是说不要添加JS验证,只是要先添加PHP,然后才添加JS。 Sometimes you find libraries / frameworks that can add both at the same time. 有时您会找到可以同时添加两者的库/框架。


So back to your code: the error appears to be that you're checking for errors after you display the error. 回到代码:错误似乎是显示错误您正在检查错误。 So it's going to fail. 因此它将失败。

Restructure your code as follows: 重新组织代码,如下所示:

  • Create default values for your form 为您的表单创建默认值
  • Create blank errors array. 创建空白错误数组。
  • If POSTED, then read in values (over defaults), validate them 如果发布,则读入值(超过默认值),验证它们
  • If all is good, then process the form and redirect [ header('location: '); exit(); 如果一切都很好,则处​​理表单并重定向[ header('location: '); exit(); header('location: '); exit(); ] to a results / thank-you page. ]转到结果/谢谢页面。
  • (Note that at this point you have not outputted any HTML at all, merely updated your default values and error array) (请注意,此时您根本没有输出任何HTML,只是更新了默认值和错误数组)
  • If all is not good (or you never got a post) then now show the HTML. 如果一切都不好(或者您从未获得过帖子),那么现在显示HTML。 You have default values for the inputs (will alos contain the POSTED values, if applicable) and error messages to display at the right points. 您具有输入的默认值(如果适用,还将包含POSTED值),并在正确的位置显示错误消息。

Basically, handle the data first, output last. 基本上,首先处理数据,然后输出。

Once that is working, then ass jQuery validation (as suggested in comments). 一旦可行,然后对jQuery jQuery进行验证(如注释中所建议)。 It's pretty good. 这是相当不错。

HTML 5 has a bunch of built in validation tools and you could use jQuery or Javascript to further enhance that. HTML 5有很多内置的验证工具,您可以使用jQuery或Javascript进一步增强它。 I am not a big fan of validating variables on a new page, especially when we could prevent the page load completely. 我不是在新页面上验证变量的忠实拥护者,尤其是当我们可以完全阻止页面加载时。 Definitely look into some sort of Client Side validation instead of posting to the the PHP page. 绝对要研究某种客户端验证,而不是发布到PHP页面。

W3Schools has a decent article on Javascript validation: http://www.w3schools.com/js/js_form_validation.asp W3Schools在Java验证方面有一篇不错的文章: http : //www.w3schools.com/js/js_form_validation.asp

The jQuery link was already given in a comment above. 上面的评论中已经给出了jQuery链接。

If Javascript is not your specialty then try something like this. 如果Java语言不是您的专长,请尝试这样的操作。 It is prebuilt and has some nice features. 它是预先构建的,具有一些不错的功能。 Best of all it is free. 最棒的是它是免费的。 http://www.javascript-coder.com/html-form/javascript-form-validation.phtml http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM