jQuery验证器表单

Question

我目前正在用jquery做一个小表格，这种表格的优点是，当该类型的错误被遗漏时，我将其发送到html中，并根据每个小键盘的类型将其放入一个小div，该小div中每个输入下面跳转的错误，现在我有重复的问题，并且没有添加相应的错误

 $('form.registerForm').submit(function() { var f = $(this).find('.form-group'), ferror = false, emailExp = /^[^\\s()<>@,;:\\/]+@\\w[\\w\\.-]+\\.[az]{2,}$/i; var p1 = $('#password1').val(); var p2 = $('#password2').val(); f.children('input').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'password': if ( p1 != p2 ) { ferror = ierror = true; f.find('.validation').text("Errno password"); } break; case 'name': if ( !isNaN(i.val()) ) { ferror = ierror = true; alert(f); f.find('.validation').text("Errno no numbers"); } break; case 'required': if (i.val() === '') { ferror = ierror = true; f.find('.validation').text("Errno needed"); } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; f.find('.validation').text("Errno long"); } break; case 'email': if (!emailExp.test(i.val())) { ferror = ierror = true; f.find('.validation').text("Errno email "); } break; case 'checked': if (!i.attr('checked')) { ferror = ierror = true; f.find('.validation').text("Errno checker"); } break; case 'regexp': exp = new RegExp(exp); if (!exp.test(i.val())) { ferror = ierror = true; f.find('.validation').text("Errno regexp"); } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'Passwords repetidas') : '')).show('blind'); } }); if (ferror) return false; else var str = $(this).serialize(); $.ajax({ type: "POST", url: "contactform/contactform.php", data: str, success: function(msg) { // alert(msg); if (msg == 'OK') { $("#sendmessage").addClass("show"); $("#errormessage").removeClass("show"); $('.contactForm').find("input, text").val(""); } else { $("#sendmessage").removeClass("show"); $("#errormessage").addClass("show"); $('#errormessage').html(msg); } } }); return false; }); }); 

 <form action="" method="post" role="form" class="registerForm"> <div id="sendmessage">You did the register!</div> <div id="errormessage"></div> <ul class="contact-list"> <li class="form-group"> <label><i class="icon-envelope-alt"></i> Email </label> <input type="email" class="form_input" name="email" id="email" placeholder="Email" data-rule="email" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-edit"></i> Password </label> <input type="password" class="form_input" name="password" id="password1" placeholder="Contraseña" data-rule="password" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-edit"></i> Repeat password</label> <input type="password" class="form_input" name="password" id="password2" placeholder="Repite la contraseña" data-rule="password" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-pencil"></i> Name </label> <input type="text" class="form_input" name="name" id="name" placeholder="Introduce tu nombre" data-rule="name" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-pencil"></i> Surname </label> <input type="text" class="form_input" name="surname" id="surname" placeholder="Introduce tus apellidos" data-rule="name" data-msg="" /> <div class="validation"></div> </li> <li class="last"> <button class="btn btn-large btn-theme" type="submit" id="send">Register</button> </li> </ul> </form> 

我的小提琴： https : //jsfiddle.net/ho8crseu/

Answer 1

您只需要使用正确的上下文。 像这样更改代码：

f.children('input').each(function() { // run all inputs
  var i = $(this); // current input
  var parent = i.parent();

现在，当您设置错误时，您可以像这样进行操作：

case 'email':
        if (!emailExp.test(i.val())) {
          ferror = ierror = true;
          parent.find('.validation').text("Errno email ");
        }
        break;

Answer 2

根据您的验证逻辑，您需要在检测到错误时为每个输入更新data-msg值，而不是直接更新$('.validation') div的html文本。

 jQuery(document).ready(function($) { "use strict"; //Contact $('form.registerForm').submit(function() { var f = $(this).find('.form-group'), ferror = false, emailExp = /^[^\\s()<>@,;:\\/]+@\\w[\\w\\.-]+\\.[az]{2,}$/i; var p1 = $('#password1').val(); var p2 = $('#password2').val(); f.children('input').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'password': if ( !p1 || !p2 || p1 != p2 ) { ferror = ierror = true; i.attr("data-msg", "Errno password"); } break; case 'name': if ( !isNaN(i.val()) ) { ferror = ierror = true; //alert(f); i.attr("data-msg", "Errno no numbers"); } break; case 'required': if (i.val() === '') { ferror = ierror = true; i.attr("data-msg", "Errno needed"); } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; i.attr("data-msg", "Errno long"); } break; case 'email': if (!emailExp.test(i.val())) { ferror = ierror = true; i.attr("data-msg", "Errno email "); } break; case 'checked': if (!i.attr('checked')) { ferror = ierror = true; i.attr("data-msg", "Errno checker"); } break; case 'regexp': exp = new RegExp(exp); if (!exp.test(i.val())) { ferror = ierror = true; i.attr("data-msg", "Errno regexp"); } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'Passwords repetidas') : '')).show('blind'); } }); if (ferror) return false; else var str = $(this).serialize(); $.ajax({ type: "POST", url: "contactform/contactform.php", data: str, success: function(msg) { // alert(msg); if (msg == 'OK') { $("#sendmessage").addClass("show"); $("#errormessage").removeClass("show"); $('.contactForm').find("input, text").val(""); } else { $("#sendmessage").removeClass("show"); $("#errormessage").addClass("show"); $('#errormessage').html(msg); } } }); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- start contact form --> <form action="" method="post" role="form" class="registerForm"> <div id="sendmessage">You did the register!</div> <div id="errormessage"></div> <ul class="contact-list"> <li class="form-group"> <label><i class="icon-envelope-alt"></i> Email </label> <input type="email" class="form_input" name="email" id="email" placeholder="Email" data-rule="email" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-edit"></i> Password </label> <input type="password" class="form_input" name="password" id="password1" placeholder="Contraseña" data-rule="password" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-edit"></i> Repeat password</label> <input type="password" class="form_input" name="password" id="password2" placeholder="Repite la contraseña" data-rule="password" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-pencil"></i> Name </label> <input type="text" class="form_input" name="name" id="name" placeholder="Introduce tu nombre" data-rule="name" data-msg="" /> <div class="validation"></div> </li> <li class="form-group"> <label><i class="icon-pencil"></i> Surname </label> <input type="text" class="form_input" name="surname" id="surname" placeholder="Introduce tus apellidos" data-rule="name" data-msg="" /> <div class="validation"></div> </li> <li class="last"> <button class="btn btn-large btn-theme" type="submit" id="send">Register</button> </li> </ul> </form> <!-- end contact form -->