1

我正在做一个注册页面。它需要姓名、密码、电子邮件、性别、国籍、出生日期和其他信息。

我做了注册,很好。但我需要添加验证,这是我到目前为止可以做的:

<?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>
4

2 回答 2

0

始终首先验证服务器端,即在 PHP 中(这是需要它的地方)。

然后在之后添加 JavaScript 验证。它不是必需的,但添加以改善用户体验。任何 javascript 都可以被绕过(避免),所以如果你没有 PHP 备份,那么你就会让自己面临麻烦。

请注意,我并不是说不要添加 JS 验证,只是您先添加 PHP,然后添加 JS。有时您会发现可以同时添加两者的库/框架。


回到您的代码:错误似乎是您在显示错误正在检查错误。所以它会失败。

重组你的代码如下:

  • 为表单创建默认值
  • 创建空白错误数组。
  • 如果已发布,则读入值(超过默认值),验证它们
  • 如果一切正常,则处理表单并将 [ header('location: '); exit();] 重定向到结果/感谢页面。
  • (请注意,此时您根本没有输出任何 HTML,只是更新了您的默认值和错误数组)
  • 如果一切都不好(或者您从未收到过帖子),那么现在显示 HTML。您有输入的默认值(如果适用,还将包含 POSTED 值)和错误消息以显示在正确的位置。

基本上,首先处理数据,最后输出。

一旦工作正常,然后进行 jQuery 验证(如评论中所建议的那样)。这个很不错。

于 2012-11-26T00:42:55.803 回答
-1

HTML 5 有一堆内置的验证工具,您可以使用 jQuery 或 Javascript 来进一步增强它。我不喜欢在新页面上验证变量,尤其是当我们可以完全阻止页面加载时。绝对要查看某种客户端验证,而不是发布到 PHP 页面。

W3Schools 有一篇关于 Javascript 验证的不错的文章:http: //www.w3schools.com/js/js_form_validation.asp

上面的评论中已经给出了 jQuery 链接。

如果 Javascript 不是你的专长,那么试试这样的方法。它是预先构建的,并具有一些不错的功能。最重要的是它是免费的。 http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

于 2012-11-24T13:16:38.647 回答