node.js - 当用户未能在 AMP 表单中输入正确的电子邮件 (ID) 时，如何将用户重定向到注册页面？

经过一番研究，我找到了一个相对较好的解决这个问题的方法。首先，我描述了任务细节，以完整了解其解决方案的过程：我的网站上有一个用户认证表格。它需要正确的登录（显然是用户的电子邮件），因此每次用户输入他的 emeil 时，verify-xhr 请求都会被发送到服务器，并且在不提交表单的情况下发生这种情况，因为它在 amp-form 指令中。验证端点处理验证请求和返回结果，如果发生任何错误，我们可以将其用于表单验证消息。根据文档，在 AMP 表单中没有实现任何条件逻辑，这可能有助于限制此类请求并进行重定向。这意味着会有用户会在白天和晚上捡起被遗忘的登录信息，这是不正确的。

在以下场景中，用户输入了 4 次错误的电子邮件，结果被重定向到注册页面（请注意，我使用 Handlebars 作为视图引擎）：

{{!-- verify-xhr server response, in addition to standard verifyError object,--}}
{{!-- contains with 'attempt' value which is a number of verification attempts made --}}
{{!-- during this session.  --}}

{{!-- This number is used to determine 'sclerosis' state (true || false). 'sclerosis' --}} 
{{!-- state is responsible for responsible for changing the visibility between  --}} 
{{!-- inputs: '#verification-username' & '#verification-username-fraud'.  --}} 

   
<form method="post" name="testFormName" id="testForm" action-xhr="/test/submit" target="_top" verify-xhr="/test/verify"
    on="verify-error:AMP.setState({sclerosis: event.response[0].attempt >= 3 ? false : true})"
    custom-validation-reporting="as-you-go">
    <fieldset>
        <label>
{{!-- For the sake of simplicity only login input is used for this setup --}}
{{!-- input 'change' event used to set 'lastEntry' with input value  --}}

        <input name="email" id="verification-username" type="email" placeholder="Enter 
               email" required
               on="change:AMP.setState({lastEntry: event.value})" [hidden]=!sclerosis>
        
{{!-- input value from amp-state 'lastEntry'  --}}
        <input name="email" id="verification-username-fraud" [value]="lastEntry" 
               type="email" hidden
               [hidden]=sclerosis placeholder="Enter email"
{{!-- lastly navigate to registration page  --}}
               on="change:AMP.navigateTo(url='https://biletalu.local:80/user/reg')" 
               required>
        </label>
        <span visible-when-invalid="typeMismatch" validation-for="verification-username">incorrect email format</span>
        <input type="submit" value="Войти" id="subscribe">
    </fieldset>
    <div verify-error>
        <template type="amp-mustache">
            {{#verifyErrors}}
            {{message}}{{attempts}}
            {{/verifyErrors}}
            {{^verifyErrors}}
            <p>Something went wrong. Try again later?</p>
            <div class="customError">
                \{{#verifyErrors}}
                \{{message}} \{{attempt}}
                \{{/verifyErrors}}
                <br>
                
                Wrong address used, feel free to proceed with new  <a href="/user/reg"> 
                registration </a>
            </div>
            {{/verifyErrors}}
        </template>
    </div>
</form>

在我看来，这个解决方案有一个缺点。如果用户第四次输入正确的电子邮件，他仍将被重定向到注册页面。在所有其他情况下，此构造都可以正常工作。

node.js - 当用户未能在 AMP 表单中输入正确的电子邮件 (ID) 时，如何将用户重定向到注册页面？

问题描述

解决方案

推荐阅读