Question

我在页面中有两个输入字段和两个提交表单，他们做同样的事情......只是为了获取用户的电子邮件进行订阅。

我使用以下代码：http://codepen.io/anon/pen/KrqrYB

$("input[type='text']").focus(function() {
  $(this).val(''); 
});

$(".message-validator").hide();

function validate() {
  var email = $(".input-set-input").val(),
      lastChar = email.substr(-1);
  if (validateEmail(email)) {
    $(".message-validator").hide();
  } else {
    $(".message-validator").show();

    if (email === "") {
      $(".message-validator").text("Please provide a valid email.");
    } else {
      if (email.indexOf('@') > 0) {
        if (lastChar === "@") {
          $(".message-validator").text("Please enter a part following '@'.");
        } else {
          $(".message-validator").text("Please provide a valid email.");
        }
      } else {
        $(".message-validator").text("Please include an '@' in the email address.");
      }
    }

  }
  return false;
}

$("form").bind("submit", validate);

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

这是一种正确的方法吗？或者我应该创建2个不同的表单类和按钮，并以不同的方式处理它们？

Answer 1

在表单提交处理程序中，函数this将是事件发生的形式。

因此，请使用find()

仅定位该表单中的元素

这是一个小例子，因为我不打算重写整个事情

function validate() {
  var $form = $(this);// cache $(this) 
  var email = $form.find(".input-set-input").val()
   ......
 $form.find(".message-validator").hide();

如何在一个页面中处理2个相同的表单？

1 个答案: