JavaScript jq 范围

Question

这是一个简单的验证模块。现在，我不明白为什么我的函数(validateEmail)无法调用成功。我没有 js 错误，但浏览器使用我的表单彻底验证代码进行回发

<script type="text/javascript">
    var Validation;
(function (Validation) {
    var FormValidator = (function () {
        function FormValidator(formid) {
            this.emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            this.formID = formid;
        }
        FormValidator.prototype.Validate = function () {
            var errorsSum;
            $('#' + this.formID).find('input[type="text"][validate], textarea[validate]').each(function (index, item) {
                var validateType = $(item).attr('validate');
                switch(validateType) {
                    case 'text':
                    case 'password': {
                        errorsSum += FormValidator.prototype.validateText(item);
                        break;

                    }
                    case 'email': {
                        errorsSum += FormValidator.prototype.validateEmail(item);
                        break;

                    }
                }
            });
            return errorsSum == 0;
        };
        FormValidator.prototype.validateGeneric = function (element, validationFunc) {
            var jqElement = $(element);
            alert('tested element = ' + jqElement);
            if(validationFunc(jqElement.val())) {
                alert('tested element error = ' + jqElement.val());
                element.removeClass('error');
                return 0;
            } else {
                element.addClass('error');
            }
            alert('tested element success = ' + jqElement.val());
            return 1;
        };
        FormValidator.prototype.validateEmail = function (element) {
            return FormValidator.prototype.validateGeneric(element, function (elementValue) {
                return FormValidator.prototype.emailPattern.test(elementValue);
            });
        };
        FormValidator.prototype.validateText = function (element) {
            return FormValidator.prototype.validateGeneric(element, function (elementValue) {
                return elementValue != '';
            });
        };
        return FormValidator;
    })();
    Validation.FormValidator = FormValidator;    
})(Validation || (Validation = {}));
</script>

这是我的表格

     @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @id = "register-form", @class = "form-horizontal"}))
    {
        ...    
          @Html.TextBoxFor(m => m.Email, new { @placeholder = @L("Email"), @name = "email", @validate = "email" })
        ...
    }

这是验证码

<script type="text/javascript">
    $(function () {
        $('#register-form').submit(function() {
            return (new Validation.FormValidator('register-form').Validate());
        });
    });
</script>

我对js了解不太深

Answer 1

您需要捕获提交事件并防止其触发，验证表单，如果有效则提交。现在，您在提交 JavaScript 后立即运行它，但它只是继续提交，因为您没有停止发出 http 请求。

与此相关的是，这是一个巨大的困惑。您不需要任何接近那么多代码的东西来验证表单上的电子邮件和文本是否存在。这是all you need :

var validate = function(form){
  var form_valid = true;

  form.find('input[validate], textarea').each(function(index, el){
    var type = el.attr('validate');

    if (type == 'email') {
      if (!el.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)) { form_valid = false; el.addClass('error'); }
    }

    if (type == 'text') {
      if (!el.val() == '') { form_valid = false; el.addClass('error'); }
    }
  });

  return form_valid
}

$('#register-form').on('submit', function(){
  validate($(this)) && $(this).submit()
});

希望这有帮助...

编辑:使示例更加模块化