在客戶端然后在服務器上進行表單驗證

Question

我正在使用vue.js和REST Services（java）設計一個Web應用程序。

我有一個非常復雜的表格：-類型檢查：電子郵件是格式正確的電子郵件-密碼檢查：密碼文本字段和重新輸入密碼文本字段是否匹配？ -2個下拉菜單：如果我在下拉菜單1中選擇選項A，則在下拉菜單2中，選項{R，T}應該僅出現。

因此，一種簡單的處理方法是：1.使用javascript或某些vue插件完善對客戶端的正確檢查。 2.重新檢查服務器上的所有內容，以確保沒有人“黑客”提交的json。

主要問題是我將對檢查進行兩次編碼。

有什么更好的方法？

最好的祝福

Answer 1

無論如何，您都應至少在服務器上進行驗證。

最簡單的方法：將驗證保留在服務器上，當獲取無效數據時發送錯誤消息。 在客戶端，您可以僅以紅色標簽向用戶顯示從服務器收到的錯誤消息，以便用戶知道出了什么問題。

好的方法：在客戶端和服務器上都進行驗證。 在將表單提交到服務器之前，用戶應該知道是否有無效的東西。

為什么同時使用客戶端和服務器：如果遺漏了某些內容，或者用戶跳過了UI驗證，則服務器將處理REST。 甚至有人可能只使用API​​，而不是您的表單，那么他們需要知道出了什么問題。

Answer 2

如您所言，出於安全原因， 您不能跳過后端表單驗證 。

然后，您必須考慮是否值得在前端（Vue）部分驗證表單。 在提交之前，通常是一個可用性問題（顯示更好的錯誤消息，更改輸入顏色等）。 有幾個庫可以幫助您達到此目的，例如

• vue-validator：這是最受歡迎的一款，由Vue的核心成員之一的Kazuya Kawaguchi開發。 （尚不兼容Vue 2）

• vue-form-generator：一個Vue.js插件，還可以構建表單以及進行驗證。 我已經在Vue.js Feed上編寫了有關它的迷你教程。

• vee-validate：是一個新模塊，它與Vue 1和Vue 2都兼容。它看起來非常有前途，並且是我將在本教程中使用的模塊。

• Vuelidate：針對Vue.js 2.0的簡單，輕量級基於模型的驗證

從這里和其他幾個摘錄（請檢查github）。

Vue提供了內置的表單驗證功能（輸入類型，預期的輸入（字符串，數字等）），您可以利用計算屬性的優勢來執行更復雜的計算（即有效的電子郵件），並將錯誤顯示/隱藏為用戶填寫表格。

我通常會在形式（類型，無效字符，最大長度，最小長度等）和后端中進行雙重檢查和基本驗證。 但最終由您決定。

希望能幫助到你！