javascript - 将百分比相关的验证添加到 html 输入框

Question

我有一个小页面，可让我通过单击“添加股票”按钮将股票添加到我的投资组合中，查看下图以供引用。

单击“添加股票”按钮会弹出一个模式框，其中列出了我可以添加到我的投资组合中的股票。

我可以通过单击“分配”按钮来分配库存(按百分比)。这会更新我的投资组合表。我想在这里添加以下验证。

1. 不应允许用户在上面的输入框中输入非数字值。
2. 值应始终在 0 到 100 的范围内。允许使用小数。
3. 我投资组合中所有股票的百分比总和绝不能超过 100%。

请注意，我也可以从投资组合表中更新股票百分比。

我也可以删除记录。

单击“更新”按钮后，我会在后端更新投资组合，我也想在此处添加验证，即在触发 Ajax 调用之前的按钮单击事件。

具有完整工作代码的 CodePen 链接:https://codepen.io/agrawalo/pen/rNBGyww

对应的JS代码:

function insertRow(code, name, price, diff){

    let percentage = parseInt(document.getElementById("input_"+code).value);
  innerHTML = '<td class="pt-3-half" >'+ code +'</td>' +
                  '<td class="pt-3-half" >'+name.replace(/_/g, ' ') +'</td>' +
                  '<td class="pt-3-half" >'+price+'</td>'
  innerHTML += diff >=0 ? '<td class="pt-3-half" style="color:#00c851" ><b>'+diff+'</b></td>' : '<td class="pt-3-half" style="color:red"><b>'+diff+'</b></td>'
  innerHTML +=  '<td class="pt-3-half" contenteditable="true">'+percentage +'</td>'
  innerHTML +=  '<td>' +
                          '<a onclick=removeRow(this)>' +
                                   '<i class="fa fa-times" onmouseover="this.style.color=\'tomato\'" onmouseout="this.style.color=\'grey\'" aria-hidden="true" style="color: grey;"></i>' +
                          '</a>' +
                        '</td>';
  $('#row_'+code).remove();
  $("#table-body").append('<tr id="row_'+code+'">'+innerHTML+'</tr>');
}

我想要一种非常直观的方式来添加这些验证。

Answer 1

你可以做的第一件事是给你的元素一个这样的类型:

<input type="number" value="someValue" >

对于第二个，您可以像这样在您的 javascript 文件中添加一个 if:

handleInputChange = (event) => {
  let value = event.target.value
  if(value < 100){
    /* do your job with the correct answer */
  }else {
    document.getElementById("input id").classList.add("Error class in css")
  }
}

以上函数转到您的输入元素的 onChange 属性。

第三个你也可以用 if 来做。