在PHP中使用Javascript警报框进行注册验证

我想用PHP和Javascript警报框创建一个注册验证系统（以确保注册的用户拥有有效的信息）。每次用户没有正确填写字段时，我希望他得到一个警告框，指出该字段不正确。这就是：

代码#1-用于在PHP中生成警报（这是针对按钮中的事件）

Code#2-PHP放置在提交按钮的onclick=”“属性中

if (!isset($fname) || empty($fname))
{
alert('Please enter your first name!');
}

elseif (!isset($lname) || empty($lname))
{
    alert('Please enter your last name!');
}


elseif (!isset($gender) || empty($gender))
{
    alert('Please specify your gender!');
}

elseif (!isset($phone) || empty($phone) || strlen($phone) != 10)
{
    alert('Please enter your correct Phone Number!');
}

elseif (!isset($user) || empty($user) || strlen($user) > 10 || strlen($user) < 5)
{
    alert('Please enter a Username that is 5-10 characters long!');
}

elseif (!isset($pass) || empty($pass) || strlen($pass) > 10 || strlen($pass) < 5)
{
    alert('Please enter a Password that is 5-10 characters long!');
}

elseif (!isset($repass) || empty($repass) || $pass != $repass)
{
    alert('Please repeat your Password');
}

    else
    {
         $query = mysql_query($query_send_form);
         query_error($query);
    }

---

除非您启用了magic quotes（我希望您不要），否则您的值（如

$fname

）将始终是未定义的。您可能想用

$\u POST['fname']

替换这些内容

---

另一方面，您可以只使用

empty（）

而不使用

！isset（）

因为如果未设置值，

empty（）

将返回

FALSE

。

您真的不应该这样做验证

无论何时，只要您想告诉用户由于逻辑规则的原因某些内容是无效的，都可以在前端使用javascript来完成。这里有一些用jquery或javascript编写的好插件。你也可以自己做一些简单的事情。这有助于用户，因为这样他们就不必提交页面来发现他们的密码不够长

由于sql注入，您仍然需要在POST之后和将内容放入数据库之前进行验证。这种验证有点不同，因为你只是在寻找有害的东西

这个例子是独立的。消息将转到div而不是警报

<?php
$message = ""; 
$submit = (isset($_POST['submit'])) ? $_POST['submit'] : '';
if (!empty($submit)) {
   $message = "thanks for submitting the form!"; 
}
?><div id="errors"><?php echo $message ?></div>
<form id="my_form" name="my_form" action="" method="post">
   <div style="display:inline-block;">Name<br/>
      <input name="first_name" type="text" size=8 class="required"/> 
      <input name="last_name"  type="text" size=16 class="required"/> 
   </div>
   <div style="display:inline-block;">Gender<br/>
         <select name="gender" class="required">
            <option value=''></option>
            <option value='M'>M</option>
            <option value='F'>F</option>
         </select>
   </div> 
   <div style="display:inline-block;">Phone Number<br/><input name="phone" type="text" class="required"/></div><br/>
   <div style="display:inline-block;">Username<br/><input name="username" type="text" class="required"/></div><br/>
   <div style="display:inline-block;">Password<br/><input name="password" type="password" class="required"/></div>
   <div style="display:inline-block;">Repeat Password<br/><input name="repeat_password" type="password" class="required"/></div><br/>
   <div style="display:inline-block;">Description<br/><textarea name="description"></textarea></div><br/>
   <button type="submit">Submit</button>
   <input type="hidden" name="submit" value="submit"/>
</form>

<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>

<style> .invalid {border-color:red}</style>

<script>

$(document).ready(function(){

   $("#my_form").submit(function(e){ 
      var messages = perform_validation();
      if (messages.length!==0) {
         $("#errors").empty();
         $.each(messages,function(i,msg){
            $("#errors").append(msg+"<br/>"); 
         });  
         e.preventDefault(); 
         return false; 
      } 
      // else continue to submit form normally
   }); 

   function perform_validation()
   {
      var messages = [];

      $("#my_form :input.required").removeClass("invalid"); 

      $("#my_form :input.required").each(function(){
         if ($(this).val().length===0) {
            $(this).addClass("invalid"); 
            var name = $(this).attr('name').replace('_',' '); 
            messages.push("Please provide a "+name+".");
         }
      });  
      var password = $("input[name='password']").val(); 

      if (!(password.length>=5 && password.length<=10)) {
         messages.push("Password length must be between 5 and 10 characters."); 
      }
      else { 
         if (password!=$("input[name='repeat_password']").val()) {
            messages.push("Repeat password doesn't match first password."); 
         }
      } 
      return messages; 
   } 

});  
</script>

名称

性别

M
F
电话号码


用户名


密码

重复密码


说明


提交
.无效{边框颜色：红色}
$（文档）.ready（函数（）{
$（“#我的表格”）。提交（功能（e）{
var messages=执行_验证（）；
if（messages.length！==0）{
$（“#错误”）.empty（）；
$.each（消息、函数（i、msg）{
$（“#错误”）。追加（msg+”
）；
});  
e、 预防默认值（）；
返回false；
} 
//否则继续正常提交表格
}); 
函数执行_验证（）
{
var消息=[]；
$（“#我的表单：input.required”）.removeClass（“无效”）；
$（“#我的表格：input.required”）。每个（函数（）{
if（$（this）.val（）.length==0）{
$（此）.addClass（“无效”）；
变量名称=$（this.attr（'name'）.replace（'uu'，''）；
messages.push（“请提供一个“+名称+”）；
}
});  
var password=$（“输入[name='password']”）val（）；
如果（！（password.length>=5&&password.length您确定数据正在被
POST
ed吗？我知道您正在尝试学习PHP，但这不是通常的做法。PHP在服务器端工作，因此为了让它工作，它在表单提交后接收数据，然后在单击事件时插入错误。我遇到了一个问题第二，在关闭警报框之后，表单将在他有机会更改任何内容之前被提交，因为您需要在onclick事件中返回FALSE。是的，但是我在PHP之前有一段代码：
@$fname=$\u POST['fname']@$lname=$\u POST['lname']；@$gender=$\u POST['gender']；@$phone=$\u POST['phone']；@$user=$\u POST['user']；@$pass=$\u POST['pass']；@$repass=$\u POST['repass']
这有什么问题吗？我建议删除
@
错误抑制。如果有错误，你会想知道。但是除此之外，没有。你还有没有其他没有发布的代码？有两种可能：1）没有发布值（
print\r（）
顶部的$\u POST变量用于验证您是否获得了值），2）代码中其他地方的

$fname值发生了变化，3）其他地方发生了我不知道的事情，因为其余代码没有发布：-）。除此之外，您发布的内容是正确的。

@$fname = $_POST['fname'];
@$lname = $_POST['lname'];
@$gender = $_POST['gender'];
@$phone = $_POST['phone'];
@$user = $_POST['user'];
@$pass = $_POST['pass'];
@$repass = $_POST['repass'];

<?php
$message = ""; 
$submit = (isset($_POST['submit'])) ? $_POST['submit'] : '';
if (!empty($submit)) {
   $message = "thanks for submitting the form!"; 
}
?><div id="errors"><?php echo $message ?></div>
<form id="my_form" name="my_form" action="" method="post">
   <div style="display:inline-block;">Name<br/>
      <input name="first_name" type="text" size=8 class="required"/> 
      <input name="last_name"  type="text" size=16 class="required"/> 
   </div>
   <div style="display:inline-block;">Gender<br/>
         <select name="gender" class="required">
            <option value=''></option>
            <option value='M'>M</option>
            <option value='F'>F</option>
         </select>
   </div> 
   <div style="display:inline-block;">Phone Number<br/><input name="phone" type="text" class="required"/></div><br/>
   <div style="display:inline-block;">Username<br/><input name="username" type="text" class="required"/></div><br/>
   <div style="display:inline-block;">Password<br/><input name="password" type="password" class="required"/></div>
   <div style="display:inline-block;">Repeat Password<br/><input name="repeat_password" type="password" class="required"/></div><br/>
   <div style="display:inline-block;">Description<br/><textarea name="description"></textarea></div><br/>
   <button type="submit">Submit</button>
   <input type="hidden" name="submit" value="submit"/>
</form>

<script src="http://code.jquery.com/jquery-latest.min.js"  type="text/javascript"></script>

<style> .invalid {border-color:red}</style>

<script>

$(document).ready(function(){

   $("#my_form").submit(function(e){ 
      var messages = perform_validation();
      if (messages.length!==0) {
         $("#errors").empty();
         $.each(messages,function(i,msg){
            $("#errors").append(msg+"<br/>"); 
         });  
         e.preventDefault(); 
         return false; 
      } 
      // else continue to submit form normally
   }); 

   function perform_validation()
   {
      var messages = [];

      $("#my_form :input.required").removeClass("invalid"); 

      $("#my_form :input.required").each(function(){
         if ($(this).val().length===0) {
            $(this).addClass("invalid"); 
            var name = $(this).attr('name').replace('_',' '); 
            messages.push("Please provide a "+name+".");
         }
      });  
      var password = $("input[name='password']").val(); 

      if (!(password.length>=5 && password.length<=10)) {
         messages.push("Password length must be between 5 and 10 characters."); 
      }
      else { 
         if (password!=$("input[name='repeat_password']").val()) {
            messages.push("Repeat password doesn't match first password."); 
         }
      } 
      return messages; 
   } 

});  
</script>