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 を追加し、2 番目に JS を追加するだけであることに注意してください。両方を同時に追加できるライブラリ/フレームワークが見つかる場合があります。


コードに戻ります。エラーは、エラーを表示したにエラーをチェックしているように見えます。だから失敗する。

次のようにコードを再構築します。

  • フォームのデフォルト値を作成する
  • 空のエラー配列を作成します。
  • POSTED の場合は、値を読み込み (デフォルトを超えて)、それらを検証します。
  • すべて問題がなければ、フォームを処理し、[ 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 に答える