<form action="gt/ajax-validate1" method="post">
    <h2>大图点击Demo，使用表单进行二次验证</h2>
    <br>
    <div>
        <label for="username1">用户名：</label>
        <input class="inp" id="username1" type="text" value="极验验证">
    </div>
    <br>
    <div>
        <label for="password1">密码：</label>
        <input class="inp" id="password1" type="password" value="123456">
    </div>
    <br>
    <div>
        <label>完成验证：</label>
        <div id="captcha1">
            <p id="wait1" class="show">正在加载验证码......</p>
        </div>
    </div>
    <br>
    <p id="notice1" class="hide">请先完成验证</p>
    <input class="btn" id="submit1" type="submit" value="提交">
</form>


<!-- 注意，验证码本身是不需要 jquery 库，此处使用 jquery 仅为了在 demo 使用，减少代码量 -->
<script src="http:https://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

<!-- 引入 gt.js，既可以使用其中提供的 initGeetest 初始化函数 -->
<script src="gt.js"></script>

<script>
    var handler1 = function (captchaObj) {
        $("#submit1").click(function (e) {
            var result = captchaObj.getValidate();
            console.log("== result: " + result);
            if (!result) {
								alert('请进行人机验证!')
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha1");
        captchaObj.onReady(function () {
            $("#wait1").hide();
        });
        // 更多接口参考：http:https://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: "/gee_test_register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "float", // 产品形式，包括：float，popup
                width: "100%"
                // 更多配置参数请参见：http:https://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler1);
        }
    });
</script>

# 记得务必引入这个 .rb 文件,对于sinatra放在项目根目录就好. 对于Rails建议放在lib目录下,
# 总之可以被加载就行.
require './geetest_sdk'

# 这个是sinatra的代码. rails一样的. 相信大家对Rails更熟悉.
get "/gee_test_register" do

  # 这个sdk 的两个参数: 1.  id   2. key .都是在Geetest后台申请的
	sdk = GeetestSdk.new config[:gee_test_id], config[:gee_test_key]

	result_from_gee_test_server = sdk.pre_process('随便用个字符串')

	# 返回 向服务器申请得到的 流水号
	json result_from_gee_test_server
end

{
	// 表示申请流水号成功
  success: 1,

	// 这个 challenge 是流水号， 从 gee test服务器返回的。
  challenge: "9aa704bb66dd93590adb5cdb3536db92",

	// 这个是我们申请的 app id,
  gt: "433133f5197e42bf5748be2230dbffd4"
}

$("#submit1").click(function (e) {
		var result = captchaObj.getValidate();
		console.log("== result: " + result);
		if (!result) {
				alert('请进行人机验证!')
				e.preventDefault();
		}
});

# 在原来的验证表单的Action前面,加上对于 验证码的判断即可:

# sinatra 风格. 处理  /login 这个请求
post "/login" do

	# 这里是新增的代码. 开始

  # 新搞起一个sdk.  这个sdk 的两个参数: 1.  id   2. key .都是在Geetest后台申请的
	sdk = GeetestSdk.new config[:gee_test_id], config[:gee_test_key]

	# 根据表单提交时自动传递进来的3个参数进行判断.
	result = sdk.success_validate params[:geetest_challenge], params[:geetest_validate], params[:geetest_seccode]

  # 如果 人机验证不通过的话, 跳转回 登陆页面,给出500错误. (出错信息大家自己填)
	unless result
		status 500
		return render @template_engine, :login
	end
	# 这里是新增的代码. 结束

	# 下面是原来的正常代码.
  ......
end