当用户无法在AMP表单中输入正确的电子邮件(ID)时，我如何将用户重定向到注册页面？

Question

当amp-form验证返回错误时，请告知是否有重定向到新页面的漫游？即用户通过填写其电子邮件进行有限的登录尝试，然后当超过此限制时，客户端AMP表单触发重定向到注册页面？

提前谢谢。V。

Answer 1

经过研究，我找到了一个相对较好的解决方案。首先，我描述了任务细节，以便完全理解其解决方案的过程:在我的网站上有一个用于用户身份验证的表单。它需要正确的登录(显然是用户的电子邮件)，所以每次用户输入自己的电子邮件时，都会验证-xhr请求是否被发送到服务器，这是在不提交表单的情况下发生的，就像在amp-form指令中一样。验证端点处理验证请求并返回结果，如果出现错误，我们可以将其用于表单验证消息。根据文档，在AMP-form中没有实现任何条件logick，这可能有助于限制此类请求并进行重定向。这意味着将会有用户拿起一个被遗忘的白天和晚上的登录，这是不正确的。为了挽救这些用户的神经，他们必须限制尝试的次数，作为替代解决方案，只需邀请他们再次注册即可。

在下面的场景中，用户输入了4次错误的邮箱，结果被跳转到注册页面(需要注意的是，我使用Handlebar作为视图引擎)：

{{!-- 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>

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