请告知是否在 amp-form 验证返回错误时重定向到新页面?即用户通过填充他的电子邮件进行有限的登录尝试,然后当超过此限制时,客户端 AMP 表单会触发重定向到注册页面?
提前致谢。五。
经过一番研究,我找到了一个相对较好的解决这个问题的方法。首先,我描述了任务细节,以完整了解其解决方案的过程: 我的网站上有一个用户认证表格。它需要正确的登录(显然是用户的电子邮件),因此每次用户输入他的 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>
在我看来,这个解决方案有一个缺点。如果用户第四次输入正确的电子邮件,他仍将被重定向到注册页面。在所有其他情况下,此构造都可以正常工作。