Question

工作js小提琴：http://jsfiddle.net/dofpezeg/ 这是一个动态的表单，我必须应用验证。我面临的问题是，当我点击添加按钮时，会创建新的字段并且验证不会自动运行。我通过“：input.req”使用了每个循环req是我给所有元素的类名，无论是静态还是创建新元素。现在，在onclick中我使用this.val（）来检查对于新创建的字段不起作用的空白空间。当我打印在“input.req.val（）”中的值时，它总是获取第一个字段的值全部通过循环，我如何以某种方式应用验证，以便新字段不仅对空而且对正则表达式也有效

      $(document).on('click', '#btnac', function() {
 var empty = false;
 $(':input.req').each(function() {
   console.log($(':input.req').val());
   var cbn = $('.newcbn').val();
   var cba = $('.newcba').val();
   var cban = $('.newcban').val();
   var cbic = $('.newcbic').val();
   var cuser = $('#cuser').val();
   alert($(':input.req').val());

   if ($(this).val() === '') {
     empty = true;
   } else if (/^[a-zA-Z ]+$/.test(cbn) === false) {
     empty = true;
   } else if (/^[a-zA-Z ]+$/.test(cba) === false) {
     empty = true;
   } else if (/^[0-9]+$/.test(cban) === false) {
     empty = true;
   } else if (/^[A-Za-z]{4}\d{7}$/.test(cbic) === false) {
     empty = true;
   } else if (/^[0-9]+$/.test(cuser) === false) {
     empty = true;
   } else {
     empty = false;
   }

 });
 if (empty) {
   $('#btnac').attr('disabled', 'disabled');

 } else {
   $('#btnac').removeAttr('disabled');
 }

}）;

Answer 1

尝试下面的代码，希望这就是你想要的。

   $(document).on('click', '#btnac', function() {
     var empty = false;
     $(':input.req').each(function() {
       var val = $(this).val();// the value of the input on current loop index
       var $this = $(this);

       if (val === '') {// if value is empty
         empty = true;
       } else if ($this.hasClass('newcbn')) {// test use different Regexp according to the form input's class
         empty = !/^[a-zA-Z ]+$/.test(val);
       } else if ($this.hasClass('newcba')) {
         empty = !/^[a-zA-Z ]+$/.test(val);
       } else if ($this.hasClass('newcban')) {
         empty = !/^[0-9]+$/.test(val);
       } else if ($this.hasClass('newcbic')) {
       console.info(val)
         empty = !/^[A-Za-z]{4}\d{7}$/.test(val);
       } else if ($this.attr('id') === 'cuser') {// test form $('#cuser')
         empty = !/^[0-9]+$/.test(val);
       } else {
         empty = false;
       }

       if (empty) {// if value didn't pass validate, break loop and disable button #btnac
         return false;
       }

     });

     if (empty) {
       $('#btnac').attr('disabled', 'disabled');

     } else {
       $('#btnac').removeAttr('disabled');
     }

   });

我使用输入的类来确定要测试哪个Regexp值，如果有任何值错误，它只会中断$(':input.req').each()循环，然后禁用该按钮。

Answer 2

$(document).on('click', '#btnac', function() {
 var empty = false;
 $('input').on('change', function(e){
  input_type =$(this).attr('type')
  if(input_type == "text"){}
  else if(input_type == "number"){}
  else if(input_type == "textarea"){}
})

您可以一次触发所有输入字段（页面上的所有输入字段都将被验证。为避免在输入字段上使用某些类并像这样检查它们）。

jQuery动态表单验证

2 个答案: