Question

我想验证文本字段作为时间输入。在文本字段中，我想显示小时和分钟。例如：12：25

我已经在尝试一些代码了。

function changetrigger(inputField){
  var isValid = /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(inputField.value);

  if (isValid) {
     console.log('Success');
  } else {
     console.log('Unsuccess');
  }

  return isValid;     
};

<div class="col-md-2 col-sm-6 col-6">
   <div>Starting Time</div>
   <input type="text" onchange="changetrigger(this);" id="morning" ng-model="main.morning_r" placeholder="00:00">
</div>

当我运行此代码时，控制台中发生错误。 “未定义changetrigger”。

我是新手。您能帮我解决此问题还是另一种进行此验证的方法？

Answer 1

要验证小时/分钟，可以使用如下正则表达式：

^([01]?[0-9]|2[0-3]):[0-5][0-9]$

//If you're going to allow one digit in the minutes go with:
^([01]?[0-9]|2[0-3]):([0-5][0-9]|[0-9])$

最好将事件附加到您的代码中，如下例所示。

注意：：使用input事件是跟踪用户输入的最有效方法。

function changetrigger() {
  var isValid = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$$/.test(this.value);

  if (isValid) {
    console.log('Success');
  } else {
    console.log('Unsuccess');
  }

  return isValid;
};

document.getElementById('morning').addEventListener('input', changetrigger);

<div class="col-md-2 col-sm-6 col-6">
  <div>Starting Time</div>
  <input type="text" id="morning" ng-model="main.morning_r" placeholder="00:00">
</div>

Answer 2

HTML中的

ng-model表示您正在使用AngularJS，那么为什么不使用ng-keyup / ng-change并在controller中声明作用域函数呢？最好以角度方式使用所有这些。

//Example
$scope.changetrigger = function() {
     // your logic here
}

另一种选择是使用ng-pattern，可以将其用于正则表达式。

JAVASCRIPT方式：

请注意：如果您尝试将Javascript与AngularJS混合使用，请>不要忘记将HTML文件内的changetrigger函数放在下面 head / script标记，或在输入字段之前，使其在之前初始化 DOM准备就绪。 Primafacie，看来您已经宣布控制器类中的函数，结果是not defined或函数在HTML文件中的元素之后声明

1-我用onkeyup代替了onchange（用于演示）

2-我也将您的正则表达式更改为/ \ d {2}：\ d {2} /

function changetrigger(inputField){

     var isValid = /\d{2}:\d{2}/.test(inputField.value);

     if (isValid) {
         console.log('Success');
     } else {
         console.log('Unsuccess');
     }

     return isValid;     
 };

<div class="col-md-2 col-sm-6 col-6">
     <div>Starting Time</div>
     <input type="text" onkeyup="changetrigger(this);" id="morning" placeholder="00:00">
 </div>

Answer 3

选中此选项（记住在其中包含jquery）

jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> 
</script>

$('.inputField').on('change', function(){
    
    	var isValid = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$$/.test($('.inputField').val());
    
      if (isValid) {
         console.log('Success');
      } else {
         console.log('Unsuccess');
      }
    
      return isValid;  
    
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-6 col-6">
  <div>Starting Time</div>
  <input type="text" class="inputField" id="morning" ng-model="main.morning_r" placeholder="00:00">
</div>

这将消除功能“未定义”的问题。

如何将输入类型的文本字段验证为输入类型时间

3 个答案: