Question

由于我是网络开发的新手，并且我想朝着正确的方向前进，我对表单验证有疑问。所以，我有一个小表单，应该向数据库添加一些信息。显然，为此，我需要使用PHP。提交表单后，我需要保持在同一页面上，但我需要在表单下面向用户发送消息/错误（如果用户已将输入字段留空或数据库事务已成功完成或尚未完成全部）。

这是我的表格：

<form method="post" action="index.php" name="addOperationForm">
    <input type="text" class="input" placeholder="Name of operation" name="nameOfSearch"/>
    <input type="text" class="input" placeholder="Security code" name="securityCode"/>
    <input type="submit" class="btns" value="Add to dB" name="submitAddSearch"/>
</form>

到目前为止，我正在使用单独的PHP文件 - index.php来建立与数据库的连接并将数据添加到数据库。

要管理向用户发送消息，我应该在一个中使用PHP和HTML代码（然后以某种方式回显表单下面的消息），还是应该使用jQuery（但我怎样才能建立数据库连接）？最终，这样做的正确方法是什么？请你发一个例子吗？

Answer 1

你可以做的是制作一个PHP脚本，它将处理验证并以json格式返回响应，以便jQuery可以使用ajax处理请求。

例如在 response.php

中

<?php
  //Get submitted data from the form
  $name = $_POST["name"];

  //sample validation character is less than 2 char
  if(strlen($name) < 2){
    $response = array(
                "error" => true,
                "message" => "Name should be 2 characters or more"
           );
  }else{
      $response = array(
           "error" => false,
           "message" => "Name is valid"
      );
  }

//Return the response for ajax request
     echo json_encode($response);

现在在客户端（表单视图）使用jQuery发出ajax请求

$(document).ready(function(){
     $.ajax({
         url : "response.php", //the php script that will handle the validation
         method : "post"
     }).done(function(response){
        //handle the response
         if(response.error===false){
             //output the response message below the form
             //success has div with class success
             $("<div class='success'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");

             //redirect to a page
             //  window.location.href = "nextpage.php";
         }else{
            //error has class='error'
             $("<div class='error'>" + response.message + "</div>").appendTo("form[name='addOperationForm']");
         }
     });
});

要在成功和错误类上添加样式，请在css文件中添加以下内容

.success { background-color : #0f0; color : #fff; } /* background is green for success */
.error {background-color : #f00; color : #fff;} /* background is red for error */

代码未经过测试，但应该适用于您的用例。

Answer 2

您可以使用jQuery进行表单验证（空检查）

<强>形式

<form method="post" action="index.php" name="addOperationForm">
    <input type="text" class="input" placeholder="Name of operation" name="nameOfSearch"/>
    <input type="text" class="input" placeholder="Security code" name="securityCode"/>
    <input type="button" id="submit_btn" class="btns" value="Add to dB" name="submitAddSearch"/>
</form>

<强>的jQuery

jQuery(document).ready(function(){

    //capture button click event
    jQuery('#submit_btn').click(function(){
        var err = 0;
        jQuery('.input').each(function(){
            //if input is empty, increment err variable
            if(jQuery.trim(jQuery(this).val()).length == 0) err++;  
        });
        if(err == 0) jQuery('#form').submit(); //submit form when err is 0
        else alert("Please fill out the form completely");
    });
});

显示消息/错误 - 表单验证

2 个答案: