javascript - 根据所需属性一次验证所有输入字段

Question

我一直在处理一个包含多个字段的表单，例如文本、数字和文本区域。

我想要的是：

我想在一个条件下验证具有所需属性的输入类型的表单，例如，如果我们选择输入类型作为文本，那么应该一起验证所有文本字段，如名称、消息、teaxtarea 和所有相关的文本字段（如果有）。在相同的条件下，我希望验证其他输入字段，如数字、单选、复选框、选择和文件。

我的自定义表单工作得很好，但那是基于Id's. 我希望它基于具有必需属性的输入类型（如上所述）。我的表单的实际问题是，如果我基于 Id 拥有它，并且当我在同一个页面上有两到三个表单时会发生冲突。

这是工作的小提琴，后面是代码。

$(document).ready(function() {
  var Validator = function(form) {

    this.form = $(form);

    var Elements = {
      name: {
        selector: $('#name'),
        reg: /^[a-zA-Z]{2,20}$/
      },

      email: {
        selector: $('#email'),
        reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i
      },

      phone: {
        selector: $('#phone'),
        reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/
      },

      message: {
        selector: $('#message', '#enquiry'),
        reg: /^\s+$/
      }
    };

    var handleError = function(element, message) {
      element.addClass('input-error');
      var $li = element.parent('<div>');
      var error = $('<div class="error"></div>').text(message);
      error.appendTo($li);
      element.keyup(function() {
        $(error).fadeOut(1000, function() {
          element.removeClass('input-error');
        });
      });

    };

    this.validate = function() {

      this.form.submit(function(e) {

        for (var i in Elements) {

          var type = i;
          var validation = Elements[i];

          switch (type) {

            case 'name':
              if (!validation.reg.test(validation.selector.val())) {
                handleError(validation.selector, 'Not a valid name.');
              }
              break;
            case 'email':
              if (!validation.reg.test(validation.selector.val())) {
                handleError(validation.selector, 'Not a valid e-mail address.');
              }
              break;
            case 'string':
              if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                handleError(validation.selector, 'Special characters now allowed or empty element.');
              }
              break;
            case 'empty':
              if (validation.reg.test(validation.selector.val()) || validation.selector.val() == '') {
                handleError(validation.selector, 'Message field cannot be empty.');
              }
              break;
            default:
              break;


          }

        }

        e.preventDefault();
      });

    };
  };

  var validator = new Validator('#test');
  validator.validate();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="test" method="post" action="">

  <div id="note"></div>

  <div class="detail">
    <input type="text" id="name" name="name" autocomplete="off" required />
    <label for="name">Name</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="text" id="email" name="email" autocomplete="off" required />
    <label for="email">Email</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="number" id="phone" autocomplete="off" name="phone" required />
    <label for="phone">Phone Number</label>
  </div>
  <!--detail-->
  <div class="detail">
    <input type="text" id="enquiry" autocomplete="off" name="enquiry" required />
    <label for="enquiry">I want to know about...</label>
  </div>
  <!--detail-->
  <div class="detail message">
    <textarea type="text" id="message" autocomplete="off" name="message" required></textarea>
    <label for="message">Type your Message here</label>
  </div>
  <!--detail-->

  <!-- <div class="detail">
   <input type="radio" id="contact_male" name="gender" value="male" required />
							<input type="radio" id="contact_female" name="gender" value="female" required />
						</div>
  <detail-->


  <!-- <div class="detail">
  <input type="checkbox" id="contact_html" name="html" required />HTMl
							<input type="checkbox" id="contact_css" name="css" required />CSS
						</div>
  <detail-->


  <div class="btn-container" id="submit">
    <button type="submit">Submit</button>
  </div>

</form>

标签： javascriptjqueryhtmlformsvalidation

Answer 1

这是我在处理这么多输入字段时所做的，通过 jquery 获取所有输入元素，并在循环中应用您的工作（即验证），如下所示：

var items = $(parentElement).find("input,select");
for (var i = 0; i < items.length; i++)
            {
                var validator = new Validator(items[i]);
                validator.validate();
            }