amp-bind-recaptcha
Introduction
This example shows how to create recaptcha input using just amp-bind.
Import amp-bind so recaptcha can have multiple states
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> Recaptcha input used to verify user for amp-form
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> Implementation
The amp-state below defines three different states that the recaptcha equation could be.
<amp-state id="captcha"> <script type="application/json"> { "state1": { "result": "10", "condition": "+", "captchaCorrect": "6" }, "state2": { "result": "2", "condition": "-", "captchaCorrect": "6" }, "state3": { "result": "8", "condition": "*", "captchaCorrect": "2" } } </script> </amp-state> Form
Recaptcha forces users to provide the correct input using the [pattern] requirement. The [pattern] updates dynamically as the state changes. In order for the recaptcha to work on first pass, disable the input until the amp-bind 'state' variable is set (i.e. [disabled]="!state"). As another workaround, you could set a default pattern (without brackets) and have the [pattern] update as user refreshes the conditional. Upon refresh the 'state' is updated to provide a new equation.
<form action="https://www.google.com/" method="get" target="_top"> <input name="s" placeholder="Type Anything" type="text" on="input-debounced:AMP.setState({state: 'state1'})" required> <input [disabled]="!state" disabled type="text" name [pattern]="captcha[state].captchaCorrect" title="AMP recaptcha input" required> <span [text]="captcha[state].condition">+</span> <span>4</span> <span>=</span> <span [text]="captcha[state].result">10</span> <span on="tap:AMP.setState({state: (state == 'state1' ? 'state2' : state == 'state2' ? 'state3': 'state1')})" role="button" tabindex="0"></span> <amp-img src="https://fonts.gstatic.com/s/i/materialicons/autorenew/v4/24px.svg" width="24" height="24"></amp-img> <input type="submit" value="Submit"> </form> 如果此页面上的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能？AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例-