semantic-ui表單驗證與谷歌recaptcha（驗證碼）

任何簡單的方法來實現semantic-ui表單驗證與谷歌recaptcha如果recaptcha字段被選中或空？semantic-ui表單驗證與谷歌recaptcha（驗證碼）

2016-12-22 user6067699

對Google reCaptcha驗證使用以下驗證。

腳本：

$(document).ready(function() { 
    $('.ui.form').form({ 
     recaptcha: { 
      identifier: 'g-recaptcha-response', 
      rules: [ 
       { 
        type: 'empty', 
        prompt: 'Please complete reCaptcha validation.' 
       } 
      ] 
     } 
    }, 
    { 
     onSuccess: function (event, fields) { 
      console.log('Success:', fields); 
      return false; 
      //event.preventDefault(); 
     }, 
     onFailure: function (error) { 
      console.log('Failure',error); 
      return false; 
     } 
    }); 
});

HTML：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Self Registration Module</title> 
     <meta charset="utf-8" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
     <script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 -> 
     <script src="../../Content/semantic/semantic.min.js"></script> 
     <link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" /> 
     <script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script> 
    </head> 
    <body ng-app="registrationApp"> 
     <div class="ui container" lang="en" 
      <div class="ui attached message"> 
       <div class="header"> 
       Registation Form 
       </div> 
       <p>Fill out the form below to register user in rev</p> 
      </div> 
      <form class="ui form attached segment"> 
       <div class="field"> 
        <div vc-recaptcha 
         key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'" 
         ng-model="RecaptchaResponse"> 
        </div> 
       </div> 
       </div> 
      </form> 
     </div> 
    </body> 
</html>

來源

2017-04-18 14:31:46

要擴大Arpit的回答是：

下面是我

定製的檢驗工作無角的解決方案規則在你的字段驗證之上N：

$.fn.form.settings.rules.recaptchaValidate = function() { 
    return (recaptchaVerified); 
};

添加到您的驗證：

recaptcha: { 
    identifier: 'recaptcha', 
    rules: [ 
    { 
     type: 'recaptchaValidate', 
     prompt: 'Please complete reCaptcha validation.' 
    } 
    ] 
}

和你的HTML：

<div class="required field"> 
    <div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div> 
    <input type="hidden" name="recaptcha" id="recaptch-validation"> 
</div> 

[ ... then this just before closing body tag ... ] 

<script type="text/javascript"> 
    var recaptchaVerified = false; 
    var correctCaptcha = function(response) { 
    recaptchaVerified = true; 
    }; 
    var expiredCaptcha = function() { 
    recaptchaVerified = false; 
    }; 
</script>

來源

2017-08-08 04:25:32

semantic-ui表單驗證與谷歌recaptcha（驗證碼）

回答

相關問題