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 に答える