Question

我已经输入了输入字段，只需要检查数字，如果输入的值是数字 - 另一个div <DataTrigger Binding="{Binding Path=Background.Color, RelativeSource={RelativeSource Self}}" Value="Red">应该.hidden我还有多个eventlistener on如果有可能将此事件与表单输入事件组合在一起，则可以看到此display: block;块可以看到四个块。

＆＃13;

.hidden

＆＃13;

;
(function() {
  var amount_list = document.querySelectorAll('.form-row .donate');
  var amount_array = [].slice.call(document.querySelectorAll(".form-row .donate"));
  var donerForm = document.getElementById('hidden');
  var inputDonateField = document.getElementById('donate-price').value;
  var inputNumber = /^[0-9]+$/;
  var onClickFormVisible = function() {
    donerForm.style.display = "block";

  };

  var amoutn_array = amount_array.map(function(e) {
    return e.addEventListener('click', onClickFormVisible);
  });


  // var onclickInputNumberDonate = function() {
  //     // If x is Not a Number or
  //     if (isNaN(inputDonateField) && inputDonateField.length > 0) {
  //         console.log(inputDonateField);
  //         return onClickFormVisible();
  //
  //     } else {
  //         return false;
  //     }
  // };


  function validateForm() {
    if (inputDonateField === null || inputDonateField === "") {
      alert("Name must be filled out");
      return false;
    }
  }
})();

＆＃13;

#hidden {
  display: none;
}

＆＃13;

Answer 1

大多数浏览器支持type="number"，也可以使用min和max属性指定范围，并且可以使用step属性仅接受某些数字（例如整数）。

<input type="number" min="0" max="50" step="1" />

在表单的submit上，您仍然需要验证。 IsNan()可用于过滤掉一些输入。与new RegExp('^[0-9]+$');之类的正则表达式进行比较是一个安全的选择。

至于：

如果可以将此事件与表单输入事件结合使用。

我不太清楚你在问什么。如果您询问如何对onclick和onsubmit事件进行验证，只需创建验证功能，例如validateInput()，并将其调用onclick和{{1} }。

onsubmit

Answer 2

现在使用keyup输入事件为我工作。

＆＃13;

(function() {
    var amount_list = document.querySelectorAll('.form-row .donate'); //node-list
    var amount_array = [].slice.call(document.querySelectorAll(".form-row .donate")); //node-list to array
    var donerForm = document.getElementById('hidden');
    var inputDonateField = document.getElementById('donate-price');
    var inputNumber = /^[0-9]+$/;


    var onClickFormVisible = function() {
        donerForm.style.display = "block";
    };
    var onInputTypeNumber = function() {
        if (inputNumber.test(inputDonateField.value)) {
            donerForm.style.display = "block";
        } else {
            return false;
        }
    };
    //onclick event for each amount images
    var amoutn_array = amount_array.map(function(e) {
        return e.addEventListener('click', onClickFormVisible);
    });
    //input event only if value === number
    inputDonateField.addEventListener("keyup", onInputTypeNumber);

})();

＆＃13;

.form-row{display:flex; margin:2rem;}
.donate{
background: #007DBD;
  width: 75px;
  height:50px;
  padding: 1rem;
  border: 1px solid black;
 
}
#hidden{
display:none; 
  width: 100px;
  height:150px;
  background: gray;
  color: black;
  text-align:center;
  padding: 2rem;
}

＆＃13;

<div class="form-row">
  <label>Label</label>
  <div class="donate">50kr</div>
  <div class="donate">100kr</div>
  <div class="donate">200kr</div>
  <div class="donate">500kr</div>
</div>
<div class="form-row">
  <div class="form-col doner-price">
    <label for="donate-price">
      only number
      <input type="text" id="donate-price" name="name" value="">
    </label>
  </div>
</div>

<div id="hidden">Only if Input value === to number.You are see this block;</div>

＆＃13;

输入验证号，显示另一个块

2 个答案: