在模糊表单验证上遇到javascript问题

时间：2016-02-15 15:52:16

标签： javascript jquery html validation

我不是JS中的佼佼者，但我正在尝试在运行时使用表单验证客户端。我的问题是验证需要有效电子邮件的电子邮件字段并且是强制性的。强制部分工作得很好，但电子邮件验证部分不起作用。任何人都可以帮忙吗？ Here's a pen of the problem以及下面的代码。 

var defaultForm = (function() {
  var init = function() {
    // Initial hides
    $('.error').hide();
  };
  return {
    init: init
  };
}());
(function() {
  var
    error = $('.error'),
    isNotEmpty = false,
    numberRegEx = /[0-9]|\./,
    emailRegEx = /^(([^<>()\[\]\\.,;:\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,}))$/,
    $this;
  defaultForm.init();
  // Check for empty mandatory fields
  $('input').each(function() {
    $(this).on('blur', function() {
      $this = $(this);
      if ($this.val() !== "" && $this.val() !== "---") {
        isNotEmpty = true;
      } else if (typeof($this.attr('required')) === typeof undefined) {
        isNotEmpty = true;
      } else {
        isNotEmpty = false;
      }

      if (isNotEmpty === true) {
        $this.closest('.has-feedback').addClass('has-success');
        $this.closest('.has-feedback').removeClass('has-error');
        $this.next('span').hide();
        $this.parent().next('.error').hide();
      } else {
        $this.closest('.has-feedback').addClass('has-error');
        $this.closest('.has-feedback').removeClass('has-success');
        $this.next('span').show();
        $this.parent().next('.error').show();
      }
    });
  });
  // Check for non-numeric input in number fields
  $('input[type=number]').on('blur', function() {
    $this = $(this);
    if (numberRegEx.test($(this).val()) === true) {
      $this.closest('.has-feedback').addClass('has-success');
      $this.closest('.has-feedback').removeClass('has-error');
      $this.next('span').hide();
    } else {
      $this.closest('.has-feedback').addClass('has-error');
      $this.closest('.has-feedback').removeClass('has-success');
      $this.next('span').show();
      $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number');
    }
  });
  // Check for non-numeric input in number fields
  $('input[type=emai]').on('blur', function() {
    $this = $(this);
    if (emailRegEx.test($(this).val()) === true) {
      $this.closest('.has-feedback').addClass('has-success');
      $this.closest('.has-feedback').removeClass('has-error');
      $this.next('span').hide();
    } else {
      $this.closest('.has-feedback').addClass('has-error');
      $this.closest('.has-feedback').removeClass('has-success');
      $this.next('span').show();
      $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address');
    }
  });
}());
.panel-grey {
  background-color: #f8f8f8;
  border: 1px solid #d6d7d7;
  padding: 1.25rem;
  margin-top: 1rem;
}
.icon {
  width: 16px;
  height: 16px;
}
.has-error .form-control {
  border-color: #cc0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error span.error {
  color: #cc0000;
}
.has-error span.error .icon {
  fill: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="display:none">
  <svg width="0" height="0" style="position:absolute">
    <symbol viewBox="0 0 20 20" id="warning">
      <path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path>
    </symbol>
  </svg>
</div>
<form>
  <div class="panel-app-personal-name panel-grey">

    <div class="form-group">
      <label for="control_COLUMN4" class="col-sm-4">Name*</label>
      <div class="col-sm-6 has-feedback">
        <input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required="">
        <span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="form-group">
      <label for="control_EMAIL" class="col-sm-4">Email address*</label>
      <div class="col-sm-6 has-feedback">
        <input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">
        <span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span>
      </div>
      <div class="clearfix"></div>
    </div>
</form>

1 个答案:

答案 0 :(得分：1)

2个小问题。

错过l中的$('input[type=emai]')。

和

您的电子邮件地址为type="text"： - 

<input type="text" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">


var defaultForm = (function() {
  var init = function() {
    // Initial hides
    $('.error').hide();
  };
  return {
    init: init
  };
}());
(function() {
  var
    error = $('.error'),
    isNotEmpty = false,
    numberRegEx = /[0-9]|\./,
    emailRegEx = /^(([^<>()\[\]\\.,;:\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,}))$/,
    $this;
  defaultForm.init();
  // Check for empty mandatory fields
  $('input').each(function() {
    $(this).on('blur', function() {
      $this = $(this);
      if ($this.val() !== "" && $this.val() !== "---") {
        isNotEmpty = true;
      } else if (typeof($this.attr('required')) === typeof undefined) {
        isNotEmpty = true;
      } else {
        isNotEmpty = false;
      }

      if (isNotEmpty === true) {
        $this.closest('.has-feedback').addClass('has-success');
        $this.closest('.has-feedback').removeClass('has-error');
        $this.next('span').hide();
        $this.parent().next('.error').hide();
      } else {
        $this.closest('.has-feedback').addClass('has-error');
        $this.closest('.has-feedback').removeClass('has-success');
        $this.next('span').show();
        $this.parent().next('.error').show();
      }
    });
  });
  // Check for non-numeric input in number fields
  $('input[type=number]').on('blur', function() {
    $this = $(this);
    if (numberRegEx.test($(this).val()) === true) {
      $this.closest('.has-feedback').addClass('has-success');
      $this.closest('.has-feedback').removeClass('has-error');
      $this.next('span').hide();
    } else {
      $this.closest('.has-feedback').addClass('has-error');
      $this.closest('.has-feedback').removeClass('has-success');
      $this.next('span').show();
      $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid number');
    }
  });
  // Check for non-numeric input in number fields
  $('input[type=email]').on('blur', function() {
    $this = $(this);
    if (emailRegEx.test($(this).val()) === true) {
      $this.closest('.has-feedback').addClass('has-success');
      $this.closest('.has-feedback').removeClass('has-error');
      $this.next('span').hide();
    } else {
      $this.closest('.has-feedback').addClass('has-error');
      $this.closest('.has-feedback').removeClass('has-success');
      $this.next('span').show();
      $this.next('span').html('<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter a valid email address');
    }
  });
}());
.panel-grey {
  background-color: #f8f8f8;
  border: 1px solid #d6d7d7;
  padding: 1.25rem;
  margin-top: 1rem;
}
.icon {
  width: 16px;
  height: 16px;
}
.has-error .form-control {
  border-color: #cc0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error span.error {
  color: #cc0000;
}
.has-error span.error .icon {
  fill: #cc0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div style="display:none">
  <svg width="0" height="0" style="position:absolute">
    <symbol viewBox="0 0 20 20" id="warning">
      <path d="M19.512 17.982l-8.908-15.63a.696.696 0 0 0-1.208 0L.49 17.98c-.122.212-.12.47.004.68s.352.34.598.34h17.815c.244 0 .473-.13.598-.34s.126-.468.007-.68zm-8.412-.98H8.9v-2h2.2v2zm0-3.5H8.9v-6h2.2v6z"></path>
    </symbol>
  </svg>
</div>
<form>
  <div class="panel-app-personal-name panel-grey">

    <div class="form-group">
      <label for="control_COLUMN4" class="col-sm-4">Name*</label>
      <div class="col-sm-6 has-feedback">
        <input type="" name="" class="form-control form-control-md" id="control_COLUMN4" placeholder="Full name" aria-describedby="nameTextFieldError" required="">
        <span id="nameTextFieldError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Please enter your name</span>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="form-group">
      <label for="control_EMAIL" class="col-sm-4">Email address*</label>
      <div class="col-sm-6 has-feedback">
        <input type="email" name="" class="form-control form-control-md" id="control_EMAIL" placeholder="Email address" aria-describedby="emailError" value="" required="">
        <span id="emailError" class="error" style="display: none;"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning"></use></svg> Email address is mandatory</span>
      </div>
      <div class="clearfix"></div>
    </div>
</form>

相关问题
最新问题