如何模仿使用javascript/html/css的struts驗證

在過去的幾年中，我一直專注於後端開發，所以我的技能缺乏。我是志願者，擔任網站的網站管理員，並且希望完成表單驗證（目前沒有）。
我的問題：基本上我有一個有幾個名稱字段，電子郵件地址和電話號碼的表單。提交表格時，我會驗證所有字段。如果數據無效，我想將該字段的標籤顏色更改爲紅色（與struts驗證類似）。最簡單的方法是什麼？如何模仿使用javascript/html/css的struts驗證

編輯：我也有後端PHP驗證。我期待在前端使它更漂亮，更方便用戶。 PHP驗證位於不同的服務器上。如果驗證在後端失敗，它將顯示一條消息，並且用戶被迫使用「後退」按鈕。我希望重新回到原始頁面並顯示無效字段。

來源

2008-12-31 l15a

Struts驗證發生在服務器端; JavaScript驗證在客戶端上運行。這種區別很重要，因爲即使您的客戶端在瀏覽器中關閉了JavaScript，服務器端驗證仍然有效（據報道大約有10％的人會這樣做）。

如果可以的話，最好有兩個。

當你建立的頁面服務器端

來源

2008-12-31 16:54:24 duffymo

感謝您的評論。後端驗證已經處理完畢，但我想讓前端更友好。我編輯了我的問題。 – l15a 2008-12-31 16:56:54

，標記所有有錯誤的字段在其中：

<input type="text" name="phone_number" class="error_field"> 
    555-121 
</input>

然後在頁面的CSS包括像一個條目：

input.error_field { color: #FFF; bgcolor: #C00; }

（該句點是「類選擇器」，意味着它適用於所有具有類屬性「error_field」的輸入。如果您已經使用類輸入標籤，則可以給元素多個類，只需使用空格分隔即可）。

如果您想知道Struts爲頁面着色生成什麼樣的代碼，一個簡單的方法是使用Firefox的Firebug擴展。

來源

2008-12-31 17:27:17 Glazius

假設標籤與輸入的DOM層級處於同一級別，並且它恰好位於標記中的輸入旁邊，則可以執行類似操作。

首先，一些示例HTML：

<html> 
    <body> 
     <form onsubmit="return validation()" action="submit.php" method="post"> 
      <label for="name">Name:</label> 
      <input type="text" value="" id="name" /> 
      <label for="email">Email:</label> 
      <input type="text" value="" id="email" /> 

      <input type="submit" value="Submit" /> 
     </form> 
    </body> 
</html>

正如你可以看到，所有的輸入通過與正確的屬性的標籤之前。

現在的JavaScript中，這將走在頭：

<script type="text/javascript"> 
    function validation() { 
     //So we have a validation function. 
     //Let's first fetch the inputs. 
     name = document.getElementById("name"); 
     email = document.getElementById("email"); 

     //The variable error will increment if there is a validation error. 
     //This way, the form will not submit if an error is found. 
     error = 0; 

     //Now for validation. 
     if(name.value.length < 6) { 
      //We've found an error, so increment the variable 
      error++; 

      //Now find the corresponding label. 
      nameLabel = name.previousSibling; 

      //If we found the label, add an error class to it. 
      if(nameLabel && nameLabel.for = name.id) { 
       nameLabel.className = "error"; 
      } 
     } 

     /////////////////// 
     //Do the same with the email... 
     /////////////////// 

     //Now, if there are no errors, let the form submit. 
     //If there are errors, prevent it from doing so. 
     return (error == 0) ? true : false; 
    } 
</script>

現在只需添加一些CSS：

<style type="text/css"> 
.error { 
    background-color: red; 
} 
</style>

編輯 - 我猜你不希望這種解決方案，但是如果你想在去服務器之前驗證它，那麼你就去。 :)

來源

2008-12-31 17:34:55 Salty

您可以像其他人所建議的那樣把它放在一起。但我似乎記得Struts有自己的JavaScript驗證。它可以配置爲生成JavaScript函數，這些函數執行與服務器端相同的檢查。檢查documentation - 這可能是一種快速開始的方式，但它可能不像您想要的那樣可自定義。

來源

2008-12-31 17:43:49

我以前絕對沒有使用過struts，但是我做了很多使用和不使用javascript的表單驗證。

在我看來，你應該總是有javascript和服務器端驗證，所以它應該適用於每個人。

服務器端，你應該做一些像glaziusf.myopenid.com提到的東西，只需要添加一個類到顯示爲紅色的元素。

在javascript（和ajax）中，只需將相同的類添加到您要使用服務器端的元素，但動態添加。

來源

2008-12-31 18:18:55

我建議你學習一個像JQuery或Prototype這樣的JavaScript框架。 JQuery可以幫助您從過濾元素中獲取值，修改它們的CSS，添加視覺效果等。

我並不真正瞭解您的網站的PHP邏輯，但如果該操作提交給自己，但您可以在同一頁面中進行驗證，但我不知道這是否是一種好的做法。例如，你把下面的頂部：

if($_SERVER['REQUEST_METHOD'] == 'POST'){ 
//field validation code...

用PHP重定向你只是說：

header("Location: THE_PAGE.php");

雖然你不應該在這之前outputed什麼。你可以傳遞一個參數給你的頁面（例如：THE_PAGE.php？valMsg = 1），告訴它顯示驗證消息或類似的東西。

來源

2009-01-13 17:47:00 xgMz

如何模仿使用javascript/html/css的struts驗證

回答

相關問題