Question

如何在按下按钮之前强制用户输入有效时间和有效数字＆＃34;显示＆＃34;？

我的html代码中有两个字段，我在JS中找到了两个很好的验证脚本。一个用于时间，一个用于确定输入字段是否具有数值。

我无法改变HTML中的任何内容。

＆＃13;

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    alert("Wrong time!");
    return false;
  }
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  if (roomopt.value.match(numbers)) {
    console.log("is number");
  } else {
    console.log("not a number!");
  }
}

＆＃13;

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>
<button id="show-schedule">Show</button>

＆＃13;

Answer 1

＆＃13;

function checkTime( val ) {                     //Pass a value
  return /^\d{1,2}:\d{2}([ap]m)?$/.test( val ); //Return a boolean
}

function checkNum( val ) {    //Pass a value
  return /^\d+$/.test( val ); //Return a boolean
}

const time = document.getElementById("time-until"),
      room = document.getElementById("room"),
      show = document.getElementById("show-schedule");

function validateForm () {
  show.disabled = (checkTime( time.value ) && checkNum( room.value )) === false;
}

[time, room].forEach( el => el.addEventListener("input", validateForm) );

＆＃13;

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>

<!-- MAKE BUTTON DISABLED -->
<button id="show-schedule" disabled>Show</button>

＆＃13;

现在，无论输入ID如何，您都可以重复使用checkTime( val )等功能。

Answer 2

如果要在将数据输入字段时进行验证，则应将函数设置为在字段的input事件上运行。如果您想等到用户离开该字段并更改了该字段的值，则可以使用字段的change事件。

但是，您还希望在提交包含字段的表单时检查数据，因此您还需要为表单设置submit事件处理程序。

将函数连接到事件的方法是将函数注册为“事件处理程序”，并使用 .addEventListener() 方法完成（使用基于标准的现代代码）：

// First, get references to the elements you'll want to work with.
// And, use those variable names to reference the elements in your 
// code, not their IDs.
var timeUntil = document.getElementById("time-until");
var room = document.getElementById("room");
var form = document.querySelector("form");

// We'll set up a variable to keep track of whether there are any errors
// and we'll assume that there are not any initially
var valid = true; 

// Set up the event handling functions:
timeUntil.addEventListener("change", checkTime);
room.addEventListener("change", checkRoomNr);
form.addEventListener("submit", validate);

function checkTime(evt){
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if(timeUntil.value != '' && !timeUntil.value.match(re)) {
    console.log("Wrong time!");
    valid = false; // Indicate an error
  } else {
    valid = true;
  }
}

function checkRoomNr(evt){
  var numbers = /^[0-9]+$/;
  if(!room.value.match(numbers)){
    console.log ("not a number!");
    valid = false; // Indicate an error    
  } else {
    valid = true;
  }
}

// This function is called when the form is submitted
function validate(evt){
  // Invoke the validation functions in case the fields have not been checked yet
  checkTime();
  checkRoomNr();
  if(!valid){
     evt.preventDefault(); // Cancel the form's submission
     console.log("Submission cancelled due to invalid data");
  }
}

<form action="#">
  <div>
    <label for="time-until">Time</label>      
    <input type="text" id="time-until">
  </div>  
  <div>
    <label for="room">Room</label>      
    <input type="text" id="room">
  <div>
  <button id="show-schedule">Show</button>
<form>

Answer 3

这可能是一个起点，基本上您需要添加事件处理程序并连接time_untilopt和time_untilopt并将disabled添加到show按钮。并倾听变化。有很多方法，这只是一个想法。

const button = document.getElementById('show-schedule');
const time_untilopt = document.getElementById('time-until');
const roomopt = document.getElementById('room');

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    alert("Wrong time!");
    return false;
  }
  return true;
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  if (roomopt.value.match(numbers)) {
    console.log("is number");
    return true;
  } else {
    console.log("not a number!");
    return false;
  }
}

function change() {
  button.disabled = !(checkTime() && checkRoomNr());
}

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until" onchange="change()">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room" onchange="change()">
</div>
<button id="show-schedule" disabled="true">Show</button>

Answer 4

在您的两个功能中，您需要设置变量（time_untilopt和roomopt）以实际指向您的两个<input>字段。然后，如果他们通过验证，您只需要return true，如果他们不通过，则return false。

要触发这些检查，您需要为提交设置onlick属性，该属性与第三个函数绑定，我将其命名为show()。第三个函数应有条件地检查其他函数的两个是否返回true。如果他们这样做，一切都很好，你可以继续提交。如果他们不好，只需在此功能中return false。

这可以在以下内容中看到：

＆＃13;

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  var time_untilopt = document.getElementById('time-until');
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    return true;
  }
  else {
    console.log("Wrong time!");
    return false;
  }
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  var roomopt = document.getElementById('room');
  if (roomopt.value.match(numbers)) {
    return true;
  } else {
    console.log("The room number is not a number!");
    return false;
  }
}

function show() {
  if (checkTime() && checkRoomNr()) {
    console.log('Both validations passed!');
    return true;
  }
  else {
    return false;
  }
}

＆＃13;

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>
<button id="show-schedule" onclick="show()">Show</button>

＆＃13;

另请注意，您的checkTime()功能实际上正在执行您想要的相反;如果时间不为空并且与验证匹配，则您希望返回 true ，而不是 false 。在上面的例子中已经纠正了这一点。

希望这有帮助！：）

如何触发验证

4 个答案: