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请求的函数，该函数可以对您的数据库执行查询以检查用户是否存在。它像livesearch一样工作。这是example。我建议使用JQuery Ajax调用而不是显示的XMLHttpRequest。在我看来，这更容易。

编辑：在您的情况下，您将使用Java文件补充PHP文件。您可以使用ajax请求中的url来启动针对REST后端的查询，该后端提供必要的信息。

Answer 2

选项1

您发送包含数据的新用户请求。

在后端，您测试用户首先是否存在。

如果存在dosn，则保存它并且您的响应正常

如果已经存在，您的回答是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相同

JavaScript：确保表单值是唯一的，Java Spring Rest作为后端

2 个答案: