Google AMP amp-bind-recaptcha

amp-bind允许元素通过数据绑定和简单的类似 JSON 的表达式更改对用户输入的响应，而 recaptcha 元素仅使用 amp-bind 创建一个recaptcha输入。

所需脚本：导入 amp-bind 以便重新验证可以有多种状态。

导入 amp-form 以便可以使用 recaptcha 输入来验证用户输入。

使用 amp-state 定义要在 recaptcha 方程中使用的不同状态。

HTML

  
      {
         "state1": {
               "result": "9",
               "condition": "+",
               "captchaCorrect": "5"
  
         },
         "state2": {
               "result": "4",
               "condition": "-",
               "captchaCorrect": "8"
         },
         "state3": {
               "result": "8",
               "condition": "*",
               "captchaCorrect": "2"
         }
       }
    

示例： Recaptcha 要求用户使用 [pattern] 要求提供正确的输入。 [pattern] 随着状态的变化而动态更新。

为了使 recaptcha 在第一次通过时工作，输入被禁用，直到 amp-bind 变量被设置。刷新后，“状态”会更新以提供新方程。

HTML

  

    Google AMP amp-bind-recaptcha
    
    
    
  
    
  
    
  
    
    
    
  
    
    
    
  
    
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
  
            to {
                visibility: visible
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    

  

    
    
        GeeksforGeeks
    
    
    
        Type text in the TextBox and Verify 
        captcha. If you don't know the 
        captcha answer then you can 
        refresh it for new recaptcha
    
  
    
    
        
        {
           "state1": {
                 "result": "9",
                 "condition": "+",
                 "captchaCorrect": "5"
  
           },
           "state2": {
                 "result": "3",
                 "condition": "-",
                 "captchaCorrect": "7"
           },
           "state3": {
                 "result": "12",
                 "condition": "*",
                 "captchaCorrect": "3"
           }
         }
      
    
      
    
        
  
        
  
        +
        4
        =
        10
        
  
            
            
            
        
    

  

输出：