AMP（加速移动页面）API 调用

Question

我有一个包含名称、手机号码、电子邮件和城市的表单。在提交表单时，我正在调用一个 api。我需要调用一个 api 来检查电子邮件 id 是否存在，以及一个用于手机号码的是否存在。我不知道如何在输入更改时调用 api。最好的方法是什么？提前致谢

Answer 1

据我了解，最好的方法是使用 verify-xhr 属性 --> 验证服务器上的字段 --> 服务器以 JSON 格式响应任何错误。 https://www.ampproject.org/docs/reference/components/amp-form#verification

<form
  method="post"
  action-xhr="/form/verify-json/post"
  verify-xhr="/form/verify-json/post"
  target="_blank">
    <fieldset>
        <label>
            <span>Email</span>
            <input type="text" name="email" required>
        </label>
        <label>
            <span>Zip Code</span>
            <input type="tel" name="zip" required pattern="[0-9]{5}(-[0-9]{4})?">
        </label>
        <input type="submit" value="Submit">
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            <p>Congratulations! You are registered with {{email}}</p>
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
                <p>{{message}}</p>
            {{/verifyErrors}}
            {{^verifyErrors}}
                <p>Something went wrong. Try again later?</p>
            {{/verifyErrors}}
        </template>
    </div>
</form>

来自服务器的响应可以是：

{
  "verifyErrors": [
    {"name": "email", "message": "That email is already taken."},
    {"name": "zip", "message": "The city and zip do not match."}
  ]
}