Question

我使用出生日期模式检查日期是否正确填写。但它不起作用，当我寻找空场时它工作正常。

＆＃13;

function checkStatus() {
  var flag = false,
    name, date;
  var pattern = '/^([0-9]{1,2})\\/([0-9]{1,2})\\/([0-9]{4})$/';
  $('.name-field').each(function() {

    name = $(this).find('input[name="firstname[]"]').val();
    date = $(this).find('input[name="date[]"]').val();
    if (name == "" || date != pattern) {
      flag = true;
    }
  });
  return flag
}

//Toggle disbaled class
$('.name-field').on('keyup', 'input', function() {
  //use other static element or document if not works

  $('#stepname').toggleClass('disabled', checkStatus());
});

＆＃13;

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name-field" class="name-field row">
  <div class="col-xs-12 col-sm-6 childname">
    <div class="field text-left">
      <label class="text-left">Name</label>
      <input class="firstname" name="firstname[]" type="text" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 dateofbirth">
    <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" />
    </div>
  </div>
</div>

<a href="#" id="stepname" class="btn disabled">Next step</a>

＆＃13;

我希望你们理解我的问题。

提前致谢。

Answer 1

您必须使用RegExp来检查字符串是否与正则表达式匹配。

您可以在此处详细了解RegExp测试方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

Answer 2

为方法分配回调函数时，只需使用方法名称即可。修改您的代码如下：

$('#stepname').toggleClass('disabled', checkStatus);

您的日期模式无法正常工作。为了匹配正则表达式，您需要使用any js正则表达式匹配：

var re=/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;

let arr='12/12/1212'.match(re)

if( arr.length )
 console.log("Correct ", arr[0] )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您的代码现在看起来像这样：

function checkStatus() {
  var flag = true, 
      exp=[],
      name, 
      date,
      pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;

  $('.name-field').each(function(i, e) {
     // i --> iterator index
     // e --> iteration item
     name = $(e).find('input[name="firstname[]"]').val();
     date = $(e).find('input[name="date[]"]').val();
     

     if(date)
        exp=date.match(pattern) 
     //console.log(name, date, exp);

     if (name == "" || !exp || exp.length == 0 ) {
       flag = false;
    }
  });
  return flag
}

//Toggle disbaled class
$('.name-field').on('keyup', 'input', function() {
  //use other static element or document if not works
  if(checkStatus())
      $('#stepname').removeClass('disabled');
  else if(!$('#stepname').hasClass('disabled'))
      $('#stepname').addClass('disabled');

});

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name-field" class="name-field row">
  <div class="col-xs-12 col-sm-6 childname">
    <div class="field text-left">
      <label class="text-left">Name</label>
      <input class="firstname" name="firstname[]" type="text" />
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 dateofbirth">
    <div class="field text-left">
      <label class="text-left">Date of birth</label>
      <input type="text" class="date" name="date[]" placeholder="DD / MM / JJJJ" />
    </div>
  </div>
</div>

<a href="#" id="stepname" class="btn disabled">Next step</a>

模式过滤器不工作jQuery

2 个答案: