根據所需屬性一次驗證所有輸入字段

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: /^[az-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> 

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