PHP-文本字段

下面的驗證消息對此不陌生。我的驗證代碼完美地工作。PHP-文本字段

但是，我試圖讓我的消息在每個文本字段下回顯。

我試圖將echo改爲一個錯誤信息（將所有回顯改爲$c_errorErr/$c_pass1Err），然後在輸入字段旁邊輸入echo $c_errorErr/$c_pass1Err，並將其包裝在一個span類中。

但是，此方法只是停止我的驗證消息工作。任何建議

HTML

  <!--     <div id="first">--> 
      <input type="email" id="email" name="email" placeholder="Email Address" value='' required> 
      <br> 

      <figure> 
       <input class ="login-field" type="password" id="pass1" name="pass1" value="" placeholder="Password" maxlength="30" required><!--<span class="error"><?php //echo $c_pass1Err;   ?></span>--> 
       <input class ="login-field" type="password" id="pass2" name="pass2" value="" placeholder=" Confirm password" maxlength="30" required><!--<span class="error"><?php //echo $c_pass2Err;   ?></span>--> 
       <div id="messages"></div> 
      </figure> 
      <p class="remember_me"> 
      </p> 
      <input type="submit" name="submit" value="Register" id="submit_button" class="btn btn-default"> 
      <br> 
     </form>

PHP

<?php 
     if (isset($_POST['submit'])) { 
      $c_email = $_POST['email']; 
      $c_pass1 = $_POST['pass1']; 
      $c_pass2 = $_POST['pass2']; 
      $c_emailErr = $pass1Err = $pass2Err = ""; 
      //$c_email = $c_pass1 = $c_pass2 = ""; 
      // Remove all illegal characters from email 
      //$c_email = filter_var($c_email, FILTER_SANITIZE_EMAIL); 
      //Checking the email address 
      if (!filter_var($c_email, FILTER_VALIDATE_EMAIL) === false) { 
       echo ("<b id='email'> This is a valid email address </b>"); 
      } else { 
       echo ("<b id='email'> Email is not a valid email address</b>"); 
      } 
     if (strlen($c_pass1) <= '8') { 
    echo "<b>Your Password Must Contain At Least 8 Characters!</br>"; 
     //check passwords 
    }elseif ($c_pass1 == $c_pass2) { 
         $q = "INSERT INTO Cus_Register(Cus_Email,Cus_Password,Cus_confirm_password) VALUES (?,?,?)"; 
       $stmt = mysqli_prepare($dbc, $q); 
       //new 
       // $stmt = mysqli_prepare($dbc, $insert_c); 
       //debugging 
       //$stmt = mysqli_prepare($dbc, $insert_c) or die(mysqli_error($dbc)); 

       mysqli_stmt_bind_param($stmt, 'sss', $c_email, $c_pass1, $c_pass2); 
       if ($q) { 
        echo "<script> alert('registration sucessful')</script>"; 
       } 
      } else { 
       echo "<b>Oops! Your passwords do not </b>"; 
      } 
     } 
     ?>

來源

2016-03-07 jerneva

這裏是我的2美分的價值（不依賴）：

驗證使用Javascript更好的可用性。
不會在整個php中回顯。將錯誤消息保存在數組中。您可以爲每個表單元素擴展數組。
添加驗證事件以在頁面加載後形成控件，而不是混淆html。

這並不是爲了滿足您的確切需求而使用的原因，因爲我不知道這些需求是什麼，但我希望它能回答您的基本問題。

在這個例子中，任何帶有「verify-me」類的表單元素都會被JS verifyData函數驗證。該函數將控制值用作數據，並將控制名稱用於驗證方法。您可以根據需要添加儘可能多的元素。

我複製了您在PHP驗證中使用的'驗證即用'方法，但如果您有許多表單元素，則可以使用類似於此處顯示的JS方式的switch語句來保留代碼更緊。

希望你覺得這個有用。

<?php 
      $password = $c_email = $c_pass1 = $c_pass2 = $email_status = $password_status1 = $password_status2 = ""; 
      $err_array = array('email_err' => '', 'password_err1' => '', 'password_err2' => ''); 

     if (isset($_POST['submit'])) { 
     $c_email = clean_input($_POST["email"]); 
         if (!filter_var($c_email, FILTER_VALIDATE_EMAIL) === false) { 
          // email okay 
         } else { 
           $err_array['email_err'] = 'Not a valid email'; 
          } 
     $c_pass2 = clean_input($_POST["c_pass2"]);   
     $c_pass1 = clean_input($_POST["c_pass1"]); 

      if (strlen($c_pass1) <= '8') { 
       $err_array['password_err1'] = "Password must be at least 8 characters"; 
      } elseif ($c_pass1 == $c_pass2) { 
        // carry on with fucntions 
       } else { 
         $err_array['password_err2'] = "Ooops, passwords don't match"; 
        } 
     } 

    function clean_input($data) { 
     $data = trim($data); 
     $data = stripslashes($data); 
     $data = htmlspecialchars($data); 
     return $data; 
    } 
    ?> 
    <!doctype html> 
    <html> 
    <title>form validation</title> 
    <style type = "text/css"> 
    .error 
    { 
    color: red; 
    } 
    </style> 
    <h1>Form</h1> 
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
     E-mail: <input type="text" name="email" class = "verify-me" value = "<?=$c_email?>"> 
     <span class="error"><?php echo $err_array['email_err']; ?></span> 
     <br> 
     Password: <input type="text" name="c_pass1" class = "verify-me" value = "<?=$c_pass1?>"> 
     <span class="error"><?php echo $err_array['password_err1']; ?></span> 
     <br> 
     Password again: <input type="text" name="c_pass2" class = "verify-me" value = "<?=$c_pass2?>"> 
     <span class="error"><?php echo $err_array['password_err2']; ?></span> 
     <br><br> 
     <input type="submit" name="submit" value="Submit"> 
    </form> 

    </body> 
    <script> 
     // set onclick and onchange events for all inputs with className: 'verify-me' 
    var verify = document.getElementsByClassName('verify-me'); 
     for (var i = 0; i < verify.length ; i++) 
      { 
      verify[i].onclick = function() { resetError(this); } ; 
      verify[i].onchange = function() { verifyData(this, this.name); } ; 
      } 
     // this function to clear the error code when the input is edited 
     function resetError (inputElement) { 
      inputElement.nextElementSibling.innerHTML = ''; 
     } 

     // check the item value, and run a test according to dataType. 
     function verifyData(item, dataType) { 
      switch (dataType) { 

       case 'email': 
       if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(item.value)) { 
         console.log('c_pass1 okay'); 
        } else { 
         item.nextElementSibling.innerHTML = 'Not a valid email address'; 
       } 
       break; 

       case 'c_pass1': 
       if (item.value.length >= 8) { 
        console.log('c_pass1 okay'); 
       } else { 
         item.nextElementSibling.innerHTML = 'Password must be 8 characters or more'; 
        } 
       break; 

       case 'c_pass2': 
       if (item.value == document.getElementById('c_pass1.value')) { 
        console.log('c_pass2 okay'); 
       } else { 
         item.nextElementSibling.innerHTML = 'Passwords do not match'; 
        } 
       break; 
      } 
     } 
    </script> 
    </html>

來源

2016-03-07 07:50:58

我想提供關於你的PHP代碼頂部的JS解決方案。對於最終用戶，您需要他們的實時反饋。沒有原始POST數據的情況下發布和回收對於最終用戶來說並不理想;他們感到惱火。

下面只是一個示例，您可以使用它來操作並創建自己的示例。有更多JS知識的人可能會更多地清理和精簡代碼。

至於使用你的例子和代碼的PHP解決方案;錯誤的時候，我真的不明白你爲什麼迴應你的錯誤。我會將它們保存到您的變量並回顯變量。換句話說：

if (!filter_var($c_email, FILTER_VALIDATE_EMAIL) === false) 
{ 
    $c_emailErr = "<b id='email'> This is a valid email address </b>"; 
}

然後在表單字段下面回顯您的變量。

以下是一個JS解決方案示例，它將以用戶鍵入的形式顯示錯誤。我希望這會引導你。

function validateEmail(email) { 
 
    var re = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; 
 
    return re.test(email); 
 
} 
 

 
function verifyPEmail() { 
 
    var pEmail = $("#txtNewEmail").val(); 
 

 
    if (pEmail != "" && validateEmail(pEmail) == false) { 
 
    $("#divCheckValidEmail").html("<span style='color:red;'>Email Structure is Invalid</span>"); 
 
    } else if (validateEmail(pEmail) == true) { 
 
    $("#divCheckValidEmail").html("<span style='color:green;'>Valid Email Structure</span>"); 
 
    } else if (pEmail == "") { 
 
    $("#divCheckValidEmail").html("<span style='color:red;'>Missing Email</span>"); 
 
    } 
 
} 
 

 
function verifyPass1() { 
 
    var pass1 = $("#pass1").val(); 
 

 
    if (pass1 == "" || pass1.length < 8) { 
 
    $("#divCheckPass1").html("<span style='color:red;'>Password must be at least 8 characters long</span>"); 
 
    } else { 
 
    $("#divCheckPass1").html("<span style='color:green;'></span>"); 
 
    } 
 
} 
 

 
function verifyPass2() { 
 
    var pass1 = $("#pass1").val(); 
 
    var pass2 = $("#pass2").val(); 
 

 
    if (pass1 !== pass2) { 
 
    $("#divCheckPass2").html("<span style='color:red;'>Password do not match</span>"); 
 
    } else { 
 
    $("#divCheckPass2").html("<span style='color:green;'>Passwords Match</span>"); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $("#txtVerifyEmail").keyup(verifyPEmail); 
 
    $("#pass1").keyup(verifyPass1); 
 
    $("#pass2").keyup(verifyPass2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 

 
<form action="index.php" name="formInput" method="POST" autocomplete="off"> 
 
    <label class="input"><span class="fontBold fontItalic">Email address</span> 
 
    <br> 
 
    <input type="email" name="pgEmail" id="txtNewEmail" oninput="verifyPEmail();" value=""> 
 
    </label> 
 
    <div class="registrationFormAlert" id="divCheckValidEmail"></div> 
 

 
    <label class="input"><span class="fontBold fontItalic">Password</span> 
 
    <br> 
 
    <input type="password" name="pass1" id="pass1" oninput="verifyPass1();" value=""> 
 
    </label> 
 
    <div class="registrationFormAlert" id="divCheckPass1"></div> 
 

 
    <label class="input"><span class="fontBold fontItalic">Verify Password</span> 
 
    <br> 
 
    <input type="password" name="pass2" id="pass2" oninput="verifyPass2();" value=""> 
 
    </label> 
 
    <div class="registrationFormAlert" id="divCheckPass2"></div> 
 
</form>

來源

2016-03-07 06:12:32

回答

相關問題