1

这是一个简单的验证模块。现在，我不明白为什么我的函数（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理解的不是很深

4

1 回答 1

0

您需要捕获提交事件并阻止它触发，验证表单，然后在它有效时提交。现在，您在提交 javascript 后就立即运行它，但它只是继续提交，因为您没有停止发出 http 请求。

在相关的说明中，这是一个巨大的混乱。您不需要任何接近那么多代码的东西来验证表单上的电子邮件和文本是否存在。这就是你所需要的：

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()
});

希望这可以帮助...

编辑：使示例更加模块化

于 2012-10-17T15:54:16.230 回答