jQuery:如何提交具有已编辑用户输入值的表单？

Question

例如,我有一个简单的HTML表单:

      <h3>
            <a href="#">Login</a>
        </h3>
        <div id="tabs-login">
            <form method="get" action="./dev.html">
                <fieldset>
                    <legend>
                        Email:
                    </legend>
                    <input type="text" class="required email" name="login" />
                </fieldset>
                <fieldset>
                    <legend>
                        Password:
                    </legend>
                    <input type="password" class="required" name="pass" />
                </fieldset>
                <input type="submit" value="Submit" />
            </form>
        </div>

我使用jQuery来验证它:

    <script>
      $(document).ready(function() { $("form").validate(); });
    </script>

我想在表单submition上获取用户输入的密码值,并通过这个jQuery插件从中获取SHA256并提交和.如何通过jQuery访问经过验证的值并更改它们并发送到原始表单目的地？email=user-inputed-valuepass=sha-value

Answer 1

首先 - 我想指出,我认为这不是一个好主意.在客户端实现密码散列通常是个坏主意.相反,传递应该以纯文本(通过HTTPS)发送到服务器,然后在存储之前使用您首选的算法对其进行哈希处理.这具有额外的好处,即不向使用散列方法的潜在攻击者做广告,因为该代码仅存在于服务器上.

这就是说:您将要在表单提交之前计算该SHA值.

您可以将事件处理程序绑定到密码字段的blur事件,以使用新哈希更新隐藏字段的值.或者您可以将更新逻辑添加到验证代码中.

无论额外代码在哪里,在表单提交之前准备哈希比在第一次提交之后发送第二次提交更容易.

例如

<!-- add this to the form -->
<input type="hidden" name="sha_pass" value="" />

// add this to the document ready handler
$('[name=pass]').blur(function() {
    $('[name=sha_pass]').val($.sha256($(this).val());
});