In AnQiCMS front-end, elegantly obtain specific error prompt information after verification code verification fails

As a senior website operations expert, I know the importance of user experience in website operations.When users operate on your AnQiCMS website (such as leaving messages, comments, registration, etc.), if they encounter a failed captcha verification, clear and immediate error messages can greatly reduce users' frustration and guide them to correctly complete the operation.How can one accurately obtain and display the specific error prompts after the verification failure of these captcha verification codes in the front-end of AnQiCMS?Today, let's delve into it in depth.

Understand the AnQiCMS verification code mechanism

Firstly, let us briefly review the regular workflow of AnQiCMS frontend captcha. According to the documentation provided,tag-/anqiapi-other/167.htmlEnglish, we can see that AnQiCMS usually interacts with the backend API through front-end JavaScript to obtain and display the captcha.

When your web page is loaded, or the user clicks to refresh the captcha, the front-end will send a request to the AnQiCMS backend, usuallyGET /api/captcha. The backend will generate a response containingcaptcha_id[Captcha Unique Identifier] andcaptchaThe JSON data of (Captcha image Base64 encoding or image URL). After the frontend JavaScript receives these data, it willcaptcha_idStored in a hidden field, andcaptchadisplayed to the user.

This stage, we mainly deal with the display of captcha. And our focus today is on the user filling in the captcha and submitting the form.When the verification fails.How to get specific prompts.

Error message after verification code acquisition fails

The actual verification of the captcha occurs when the user submits the form to the backend. When the user fills in the captcha and clicks the submit button, the frontend will send the form data (including the captcha content)captchaand the captcha identifiercaptcha_id) sent to the backend for processing. If the backend finds a mismatch or other errors during the captcha verification, it needs to return these specific error messages to the frontend.

AnQiCMS in handling such form submissions usually provides a flexible response mechanism.tag-/anqiapi-other/158.htmlandtag-/anqiapi-other/162.htmlIn the documents related to form submissions, we see a key parameter -return。Through setting parameters when submitting the formreturnWe can control the data format returned by the backend:

  1. return=html(Default)：If not setreturnor set tohtmlThe backend usually returns a complete HTML page, which may be the current page with error messages or redirected to an error message page.In this case, the front-end needs to parse the entire HTML page to extract error information, which is usually complex and provides a poor user experience.
  2. return=json(recommended)English for: In order to facilitate front-end JavaScript processing, we strongly recommend setting when submitting the formreturn=json. So even if the verification fails, the backend will return a structured JSON object that includescode(error code),msg(specific error information) fields.

Therefore, the core of obtaining the specific prompt information after the verification code fails is:Use asynchronous requests (AJAX) to submit the form and explicitly require the backend to return JSON formatted error information.

Implementation steps

  1. Prevent the default form submission behavior:Using JavaScript to intercept form submissions.submitEvents, preventing the browser from performing traditional page jump submission.
  2. Building asynchronous requests:PassfetchAPI or jQuery's$.ajaxMethods, manually constructing an HTTPPOSTRequest, send form data to the backend.
  3. includingreturn=jsonParameters:In the request'sbodyorURLbe sure to includereturn=jsonParameter.
  4. Parse the backend JSON response:After receiving the JSON data returned by the backend, check thecodeField to determine whether the operation is successful, andmsgField to obtain specific error提示 information.
  5. Front-end error display:The obtainedmsgInformation is displayed dynamically to the user, for example, showing red text prompts below the captcha input box, or through pop-up prompts.

Sample code (for example, a comment form)

Assuming you have already integrated the captcha according to the instructions in the comment formtag-/anqiapi-other/167.htmland the form HTML structure is similar totag-/anqiapi-other/162.html:

`html

<!-- 用户名、联系方式、留言内容等字段 -->
<div>
    <label>用户名</label>
    <div>
        <input type="text" name="user_name" required placeholder="请填写您的昵称" autocomplete="off">
    </div>
</div>
<!-- ... 其他表单字段 ... -->

<!-- 验证码部分 -->
<div style="display: flex; clear: both">
    <input type="hidden" name="captcha_id" id="captcha_id">
    <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
    <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" alt="验证码" />
    <span id="captchaError" style="color: red; display: none;"></span> <!-- 用于显示验证码错误信息 -->
</div>

<div>
    <button type="submit">提交留言</button>
    <button type="reset">重置</button>
</div>