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

回答

相关问题