如何在 Shopify 中设置确认密码字段？答案

【问题标题】：How to make Confirm Password field in Shopify?如何在 Shopify 中设置确认密码字段？
【发布时间】：2015-10-02 18:44:52
【问题描述】：

我正在创建 Shopify 网站，目前正在处理客户注册表单。我需要创建一个确认密码字段。有人知道如何在 Shopify 中执行此操作吗？

【问题讨论】：

我想通了！这是我的解决方案：pastebin.com/NkK0jYne

标签： forms passwords registration shopify

【解决方案1】：

当客户收到激活链接时，系统会提示他们输入密码和确认密码。如果做不到这一点 - 您可以添加一个额外的输入（密码确认），然后与 javascript 进行简单的比较。比如：

        .... <label for="password" class="login">{{ 'customer.register.password' | t }}</label>
        <input type="password" value="" name="customer[password]" id="password" class="large password" size="30" />


        <label for="password-confirm" class="login">{{ 'customer.register.password' | t }}</label>
        <input type="password" value="" name="customer[password-confirm]" id="password-confirm" class="large password" size="30" /> ....

然后使用 jquery - 类似

$('form').submit(function(e) {
    e.preventDefault(); // stops our form from submitting
    if ( $('#password').val() === $('#password-confirm').val()) {
     $('form').submit();
    }
});

这是在我的脑海中完成的 - 所以没有经过测试。它应该比较两个密码字符串 - 如果它们匹配，则允许提交表单。当然 - 你可能想做一些事情，比如显示一个弹出窗口......警报或消息说你的密码不匹配等。在这种情况下：

$('form').submit(function(e) {
    e.preventDefault(); // stops our form from submitting
    if ( $('#password').val() === $('#password-confirm').val()) {
     $('form').submit();
    } else {
    // put your validation message in here - this could be showing an element... or showing an alert etc
        alert("Your passwords don't match dummy!")
    }
});

你也可以轻松做到

 $( ".errorMessage" ).fadeIn( "slow", function() {
    // Animation complete
      $(this).hide();
  });

而不是警报 - 但你需要确保你有一个 .errorMessage 类的 div 包含你的错误消息:)

【讨论】：

我尝试获取您的第三个 sn-p 代码并将其添加到 scripts.js（变量相应地更改），但我在控制台中发现以下错误：“未捕获 RangeError：最大调用堆栈超出尺寸。”知道这是怎么一回事吗？
您好 Arial，您能否在此处粘贴您的代码 - 以及指向您收到错误的页面的链接
我无法将您链接到该页面，因为它受密码保护，但这是我的代码：$('form#create_customer').submit(function(e) { e.preventDefault(); // stops our form from submitting if (confirmPassword == password) { console.log("passwords match"); $('form#create_customer').submit(); } else { return false; console.log("passwords don't match"); // put your validation message in here - this could be showing an element... or showing an alert etc alert("Your passwords don't match dummy!"); } });
您也可以添加您的 html 吗？为什么不把它全部放到 jsbin 中呢？
另外 - 你的 return false 不需要.... return false 实际上在你收到警报之前退出函数......看看这个 jsFiddle jsfiddle.net/yv20kamw

【解决方案2】：

刚刚在我的注册页面上运行：

两个密码字段：

  <div id="create_password_container">
    <label for="password">Your Password<em>*</em></label>
    <input type="password" value="" name="customer[password]" id="create_password" {% if form.errors contains "password" %} class="error"{% endif %}>
  </div>

  <div id="password_confirm_container">
    <label for="password_confirmation">Password Confirmation</label> <span class="password-match">PASSWORDS DO NOT MATCH</span>
    <input type="password" value="" name="customer[password_confirmation]" id="password_confirm" />
</div>

Javascript：

    $('form#create_customer').submit(function(e) { 

    if ( $('#create_password').val() === $('#password_confirm').val()) {
      //alert('Password Good!!');

    } else {
      $('.password-match').fadeIn("slow");
      e.preventDefault(); // stops our form from submitting
    }
});

密码不匹配消息的 CSS：

.password-match {font-size: 12px; color: #f1152f; display:none;}

【讨论】：