时间戳

首页 > 解决方案 > 如何使用 html/java 确保电子邮件和确认电子邮件输入匹配

javascript - 如何使用 html/java 确保电子邮件和确认电子邮件输入匹配

问题描述

我是新来的，所以请放轻松。

目前在shopify表单上我已经编辑了注册，以便它要求电子邮件，然后也是一个确认电子邮件框。在客户提交表单之前，我如何确保两个框都匹配，如果不匹配，它希望它声明“电子邮件地址不匹配”。我相信这将通过 javascript 但不确定。

这就是我的代码查找 2 个框的方式。

    <div class="Form__Item">
      <input type="email" class="Form__Input" name="customer[email]" aria-label="{{ 'customer.register.email' | t }}" placeholder="{{ 'customer.register.email' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.email' | t }}</label>
    </div>

   <div class="Form__Item">
      <input type="email" class="Form__Input" name="customer[confirm_email]" aria-label="{{ 'customer.register.confirm_email' | t }}" placeholder="{{ 'customer.register.confirm_email' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.confirm_email' | t }}</label>
    </div>
  
    <div class="Form__Item">
      <input type="password" class="Form__Input" name="customer[password]" aria-label="{{ 'customer.register.password' | t }}" placeholder="{{ 'customer.register.password' | t }}" required="required">
      <label class="Form__FloatingLabel">{{ 'customer.register.password' | t }}</label>
    </div>
  
    
    <button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'customer.register.submit' | t }}</button>
  {%- endform -%}
</div>

提前感谢您的帮助

标签： javascripthtmlvalidationemailconfirm

解决方案

使用HTML5，您可以检查Required、minLenght、MaxLength等输入的常见验证...甚至是输入数据
的模式，在这种情况下，您必须使用javascript 并更好地使用JQuery
示例：

<input type="text" id="id1" />
<input type="text" id="id2" />

$('input').blur(function() {
if ($('#id1').attr('value') == $('#id2').attr('value')) {
alert('Same Value');
return false;
} else { return true; }
});

推荐阅读