Question

我正在尝试进行表单验证。我设法制作了验证函数，并将其存储在变量下，以便将来编写时容易得多。

var a = $('#email').keyup(function(){
      var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
      if (emailRegexp.test($('#email').val())) {
        $('#email').addClass('correct');
        $('#email').removeClass('error');
        $('.email-error').html("");
        return true;
      } else {
        $('#email').addClass('error');
        $('.email-error').html("Invalid e-mail");
        return false;
      }
    });

我有第二个函数，如果a === true或a=== false应该有2种情况：

  $(document).ready(function(){
        $('#next1').click(function(){
          if (a === true) {
            $('.first-nav').css({
              "color":"white",
              "background-color":"rgba(133,179,181,1)"});
          } else if(a === false) {
            $('.first-nav').css({
              "color":"white",
            "background-color":"red"});
          }
        });
      });

但是，即使满足条件，第一个函数也不会返回任何内容，因此第二个函数将无法工作。我当时在想更改第二个函数，而不是获取true / false值，而是尝试获取class的属性id = email。

Answer 1

它不能完全回答您的问题，但是我想提一提，您也可以使用html5模式属性代替javascript。因此您就有了纯html5 / css表单验证的可能性。

如果表单有效/无效，您可以在此处查看解释和示例，包括用于设计字段的css：https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145

Answer 2

您的变量a引用的是jQuery对象，而不是布尔值，因此它将无法通过a === true和a === false检查。您想要的是更新keyup事件处理程序中的变量：

// Assume invalid by default
var a = false;

// Update variable when email is filled out
$('#email').keyup(function(){
  var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
  if (emailRegexp.test($('#email').val())) {
    $('#email').addClass('correct');
    $('#email').removeClass('error');
    $('.email-error').html("");
    a = true;
  } else {
    $('#email').addClass('error');
    $('.email-error').html("Invalid e-mail");
    a = false;
  }
});

然后，您可以像现在一样评估a。由于它始终是布尔值，因此您不必使用===比较：

$('#next1').click(function(){
  if (a) {
    // If email is valid
  } else {
    // If email is invalid
  }
});

专业提示：与其监听keyup事件，不如直接绑定到input事件。这是因为#email的值可能会在没有键盘事件的情况下发生突变，例如当用户使用右键单击+上下文菜单粘贴电子邮件时。

$('#email').on('input', function() {
  // Email validation logic here
});

如果另一个为真，则具有功能

2 个答案: