<td contenteditable =「true」>元素的簡單驗證。

我有一個由MYSQL數據組成的表，每當我對錶中的元素進行更改時，我的數據庫將由ajax更新。這是我的javascript代碼發送可編輯行中的數據。<td contenteditable =「true」>元素的簡單驗證。

 function saveToDatabase(editableObj,column,id) {  
     $(editableObj).css("background","#FFF url(images/loaderIcon.gif) no-repeat right"); 
     $("#tabs-1").load(location.href + " #tabs-1"); 
      $.ajax({ 
       url: "saveedit.php", 
       type: "POST", 
       data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
       success: function(data){ 
        $(editableObj).css("background","#FDFDFD"); 
       } 
      });    
    }

在上面的函數之後，saveedit.php將處理更新數據庫和它的功能。

然後，這是我在html中的表格，這些表格元素是可編輯的。

 <?php 
      $result = FUNCTION_TO_RETRIEVE_DATA_FROM_DB; 
      foreach($result as $k=>$v){ 
     ?> 
     <tr> 
      <td><?php echo $k+1; ?></td> 
      <td contenteditable="true" onBlur="saveToDatabase(this, 'memberID', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["memberID"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'surname', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["surname"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'forename', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["forename"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'address', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["address"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'gradeID', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["gradeID"]; ?></td>         
     </tr> 
     <?php 
      } 
     ?>

此代碼正在工作，但我想問的問題是，我如何驗證用戶輸入到此元素的數據？例如，如果我想檢查最初的列memberID，不能超過6個字符，或者如果需要的話。我試圖做的是在使用AJAX發送之前驗證輸入的數據，但現在我不知道如何在表格元素中進行驗證。

來源

2017-04-03 yeehui

在調用ajax之前，通過在條件之前添加條件來驗證您的列。

` function saveToDatabase(editableObj,column,id) { 
    $(editableObj).css("background","#FFF url(images/loaderIcon.gif) no-repeat right"); 
     $("#tabs-1").load(location.href + " #tabs-1"); 
      if(column == "memberID"){ 
       if(editableObj.innerHTML.length > 6) { 
         alert("cannot be longer than 6 characters"); 
         return false; 
       }else{ 
         $.ajax({ 
         url: "saveedit.php", 
         type: "POST", 
         data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
         success: function(data){ 
         $(editableObj).css("background","#FDFDFD"); 
         } 
        }); 
        } 
       }    
    }`

來源

2017-04-03 04:54:27

非常感謝您的詳細解答！您的代碼足夠具體，可以讓我瞭解如何驗證它們。 – yeehui

調用saveToDatabase()功能前把所需驗證所輸入的值，如：

var newVal = editableObj.innerHTML; 
// Your validation on newVal, if validation successful call the saveToDatabase() function 
// Otherwise show an error message and do nothing

來源

2017-04-03 04:44:20

檢查傳遞參數，只處理Ajax時的條件被滿足。

function saveToDatabase(editableObj,column,id) { 
//If(editableObj.length > 6) // Case of string Check your other condition. 
if(editableObj.toString().length > 6) // in case it is not string. 
{ 
alert(Condition fail); 
} 
else 
{ 
// Your ajax call ------- 
} 

}

或者：

調用saveToDatabase功能之前，請檢查您的傳遞數據。

來源

2017-04-03 04:49:47

'editableObj' is string ??如果是字符串，它會給你一個長度。 –

查看更新以轉換字符串並查找長度。 –

editableObj是一個對象，並且您的新更新也起作用了！ editableObj.innerHTML.length工作原理相同。感謝您的幫助！ – yeehui

<td contenteditable =「true」>元素的簡單驗證。

回答

相關問題