簡體   English   中英

PHP:如何使用jQuery Ajax驗證文本框

[英]php: how to validate textbox using jquery ajax

我有一個文本框,一旦用戶從該文本框中聚焦,我想使用jquery-ajax對其進行驗證。

驗證包括:

  • 服務器端,價值進入php頁面,我必須對其進行驗證

  • 如果驗證成功,則顯示警報(“成功”); 否則,如果錯誤警報(“失敗”);

我懷疑jquery ajax將如何顯示alert(“ failure”); 到目前為止,我只是為成功而做。

我只知道以下提到的代碼,我該怎么解決我的問題? 請幫忙

<script type="text/javascript">
    $(function()
    {
        $('input[id^="datepicker"]').on('focusout',function()
        { 
             $.ajax({
                url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
                success: function(data){
                    alert('Successfully  ...');
                }
            });

        });
    });
</script>

--------------
--------------
<input class="plain" name="frmdate"   value="" size="25" id="datepicker" /> 

我的服務器端php代碼是:

$txtval =$_REQUEST['txtval'];
$fromTimestamp = strtotime( $txtval); 
//---------My Logic Code Goes Here -----------------------------
$sid=$_SESSION['id'];
$result12=mysql_query("SELECT * FROM budget where creater_id = '$sid'");
$num_rows = mysql_num_rows($result12);

if($num_rows>0)//check if empty or not
{
    while($test12 = mysql_fetch_array($result12)) {
        $from_date = strtotime($test12['from_date']);//getting all the FROM-Dates_column
        $to_date = strtotime($test12['to_date']);//getting all the TO-Dates_column

        if(isset($to_date) && isset($from_date)) {
            if((($fromTimestamp >= $from_date) && ($fromTimestamp <= $to_date)) || (($toTimestamp >= $from_date) && ($toTimestamp <= $to_date))) {
                $val = 'Y'; //return Y in meet this condition
            }
            else {
                $val = 'N'; // return N if meet this condition
            }
        }
        //---------------------Result of my logic code---------------------------------
        if($val == 'Y') //Returns TRUE
        {
            //VALIDATION FAILS - Returns Validation Error
            break;
        }
        else  if($val == 'N') {
            //VALIDATION TRUE - Returns Validation Error
        }
    }
}

更改

if($val == 'Y') //Returns TRUE
{
    //VALIDATION FAILS - Returns Validation Error
    break;
}
else  if($val == 'N') {
    //VALIDATION TRUE - Returns Validation Error
}

進入

echo $val;

然后在您的js中,只需獲取響應並提醒msg:

success: function(data){
    if (data == 'Y') {
        alert('Successfully  ...');
    } else {
        alert('Oh no...');
    }
}

它易於使用

 if($val == 'Y') //Returns TRUE
            {
                echo 'success';
            }
            else  if($val == 'N') {
                echo 'fail';
            }exit;

您將在success回調的data參數中獲得此成功/失敗。

您的php代碼將是

if($val == 'Y') //Returns TRUE
            {
              echo "Success";   
             //VALIDATION FAILS - Returns Validation Error
                break;
            }
            else  if($val == 'N') {
              echo "Fail";   
                //VALIDATION TRUE - Returns Validation Error
            }

而在JS中

$.ajax({
                           url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
                           success: function(data){
                                      if(data == "Success")
                                        alert("success");
                                      if(data == "Fail")
                                        alert("Fail");

                           }
                         });

直到並且除非您將HTTP響應設置為錯誤代碼,否則ajax不會回調到fail:函數。

一種簡單的方法是,即使驗證失敗或成功,也可以從服務器端發送回JSON字符串,如以下格式所示。

如果驗證成功

 {'status':'OK','message':'Validation success'}

如果驗證失敗

{'status':'NOK','message':'Please enter your name'}

現在,您可以在成功回調中獲取此JSON字符串,並采取適當的措施。

您可以使用ajax typedata選項發送數據,而不是通過url傳遞數據。

 $.ajax({
           url: "ajax_frmdate_validation.php",
           type:'GET',
           data:{"txtval":$(this).val()},
           success: function(data){
                 if(data=="success"){
                   alert('successful');
                 }else{
                    alert('error');
                 }
            }
         });

並且您的服務器端代碼包括此

  if($val == 'Y') //Returns TRUE
        {
           echo "success"
            break;
        }
        else  if($val == 'N') {
             echo "error";
             break;
        }

您可以這樣做:

$txtval = mysql_real_escape_string($_REQUEST['txtval']);
$fromTimestamp = strtotime( $txtval); 
 //---------My Logic Code Goes Here -----------------------------
 $sid=$_SESSION['id'];
 $result12=mysql_query("SELECT * FROM budget where creater_id = '$sid'");
 $num_rows = mysql_num_rows($result12);

 if($num_rows>0)//check if empty or not
 {
    while($test12 = mysql_fetch_array($result12)) {
    $from_date = strtotime($test12['from_date']);//getting all the FROM-Dates_column
    $to_date = strtotime($test12['to_date']);//getting all the TO-Dates_column

    if(isset($to_date) && isset($from_date)) {
         if((($fromTimestamp >= $from_date) && ($fromTimestamp <= $to_date)) || (($toTimestamp >= $from_date) && ($toTimestamp <= $to_date))) {
             $val = 'Y'; //return Y in meet this condition
         }
         else {
            $val = 'N'; // return N if meet this condition
         }
     }
     //---------------------Result of my logic code---------------------------------
     if($val == 'Y') //Returns TRUE
     {
        echo "failed";
        exit();
     }
     else  if($val == 'N') 
     {
        echo "success";
        exit();
     }

現在在您的ajax調用中:

<script type="text/javascript">
    $(function()
    {
       $('input[id^="datepicker"]').on('focusout',function()
       { 
         $.ajax({
            url: "ajax_frmdate_validation.php?txtval="+$(this).val(),
            success: function(data){
               if (data == 'success') {
                    alert("Successfully validated"); 
               } else {
                    alert("Failed");
                    return false;
               }
            }
        });

      });
   });
</script>

而不是發出警報,更好的方法是通過在錯誤消息后附加消息,在文本框下方顯示錯誤消息。

在使用mysql_real_escape_string進行檢查之前,還要進行正確的轉義

更新

你需要調用AJAX每當日期改變在輸入文本字段,所以不是focusout ,你可以使用onSelectdatepicker 因此,當選擇新日期時,將啟動ajax調用。

因此,您可以調用onSelect of focusout來代替對focusout調用較早的ajax

$(function(){
    $('#datepicker').datepicker({
        onSelect:function(date,instance){
           $.ajax({
              url: "ajax_frmdate_validation.php?txtval="+date,
              success: function(data){
                 if (data == 'success') {
                    alert("Successfully validated"); 
                 } else {
                    alert("Failed");
                    return false;
                 }
              }
           });
        }
    });
}); 

新更新

試試這個:

 <script type="text/javascript">
     $(document).ready(function() { 
       $("#datepicker").datepicker({ 
          dateFormat: "yy-mm-dd" ,
          onSelect:function(date,instance){
                          $.ajax({
                            url: "ajax_frmdate_validation.php?txtval="+date,
                            success: function(data){
                            if (data == 'success') {
                                 alert("Successfully validated"); 
                            } else {
                                 alert("Failed");
                                  return false;
                            }
                     }
                 });
            }
     }); 
  }); 
 </script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM