JavaScript：確保表單值唯一，Java Spring Rest作為后端

Question

我有一個非常簡單的REST API，可以創建用戶。 我之前沒有使用前端的經驗，因此我不知道如何正確使用JavaScript。 這是我的表格：

<form action="/user" method="get">
  Username:<br>
  <input type="text" name="username" value="inser username..."><br>
  First name:<br>
  <input type="text" name="firstname" value="insert name..."><br><br>
  Last name:<br>
  <input type="text" name="lastname" value="insert surname..."><br><br>
  <input type="submit" value="Submit">
</form>

如何實時（異步）驗證用戶名（登錄名）是否已使用或免費？ 我知道我必須以某種方式從數據庫接收信息。 我想在發送整個表單之前在用戶名表單字段下顯示消息。

Answer 1

您可以使用輸入元素的onKeyUp屬性來識別用戶是否將某些內容插入字段中。

<input type="text" name="username" value="inser username..." onkeyup="searchForName(this.value)">

您可以使用此事件來啟動對服務器運行ajax請求的函數，該函數可以對數據庫執行querxy檢查用戶是否存在。 它像實時搜索一樣工作。 這是一個例子 。 我建議使用JQuery Ajax調用未顯示的XMLHttpRequest。 我認為這更容易。

編輯：在您的情況下，您將用Java文件補充PHP文件。 您可以在ajax請求中使用url來針對提供所需信息的REST后端啟動查詢。

Answer 2

選項1

您將新的用戶請求與數據一起發送。

在后端，您測試該用戶不首先存在。

如果不存在，請保存它，然后您的響應就可以了

如果已經存在，您的答復是KO。

在前端，當您獲得響應時，請檢查錯誤字段並執行任何操作。

例如，做出這樣的自定義響應。

{ 
 error: false,
 resultMsg:"User OK"
}

{ 
 error: true,
 resultMsg:"User with name XXX already exists"
}

選項2

您可以在用戶輸入密碼時進行檢查，而不是檢查用戶登錄時是否存在。

為此，請使用onfocusout事件

 <input id="userInput" type="text" onfocusout="myFunction()"> 

在功能中，對用戶輸入和其他內容進行必要的檢查

function myFunction() {
    var userInput = document.getElementById("userInput");
    // check whatever, length, etc ...
    if(userInput.value) {
         // do ajax call to backend 
          ...
         //  on response, check if error

    }
}

然后再做一個請求后端來檢查用戶是否存在。

然后與選項1中的相同