【问题标题】:I want to restrict users from entering number ending with 5我想限制用户输入以 5 结尾的数字
【发布时间】:2018-11-20 18:52:46
【问题描述】:

这是文本字段。我希望用户只输入像 210,220,230,... 这样的值,并限制输入像 215,225,...这样的值

我正在寻找建议。我对 javascript 了解不多。

【问题讨论】:

  • 到目前为止您尝试过什么?放一些代码,以便我们更好地理解
  • 我正在寻找建议。我对 javascript 了解不多。
  • 在您的问题中包含所有相关代码,而不是在 cmets 中。
  • 欢迎来到 StackOverflow!请查看How to ask a good question 上的常见问题解答,确保包含回答问题所需的相关信息。

标签: javascript html forms text


【解决方案1】:

如果您只想阻止以 '5' 结尾的字符串:

 document.getElementById("input").onblur = checkEND;

    function checkEND() {
      let firstValue = event.currentTarget.value;
      if(firstValue.endsWith('5')){
       warnUser()
      }
    }

但这不会验证字符串是否为有效数字。

【讨论】:

  • 添加一些描述你的解决方案是什么
【解决方案2】:

function testInput() {
    var key = window.event.keyCode;
    var x = document.getElementById('textarea').value
    var y = document.getElementById('textarea2').value
    var z = parseInt(x, 10);
    if (z+10 == y) {
       document.getElementById('result').innerHTML = "valid";
       } else {
       document.getElementById('result').innerHTML = "invalid";
       }
}
<textarea maxlength="3" id="textarea">5</textarea>
<textarea maxlength="3" id="textarea2">15</textarea>
<button onclick="testInput()">Test Input</button>
<div id="result"></div>

第一个输入是你的第一个数字,第二个是你的第二个数字。 如果您想知道为什么这不能回答他的 OG 问题,请查看评论

【讨论】:

  • 这块所有的五个。但 OP 想要 以 5 结尾的数字
  • 有没有一种可能的方式,用户只能输入 10 的数字增量,如 210,220,230 ,.....??
  • 那么您是否希望用户输入是所有具有相同增量的数字列表?
【解决方案3】:

您可以从onbluronchangeoninput 处理程序中试验input 元素(https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement) 中的setCustomValidity()。如果您对该值不满意,请设置错误消息,否则设置空字符串。只要错误信息设置为非空,就会显示并且表单拒绝提交:

function check5() {
  cgiftcardq.setCustomValidity(cgiftcardq.value.endsWith('5')?"Nope, it can not end with 5":"");
}
<form>
  <input name="cgiftcardq" class="text_field" id="cgiftcardq" size="3" autocomplete="off" type="text" onblur="check5()">
  <input type="submit" value="Send">
</form>

(StackOverflow sn-ps 会干扰表单提交——可能是出于安全考虑——所以成功提交只会让表单消失)


由于setCustomValidity() 并非在任何地方都有效(根据compatibility table,它不适用于非Andorid 手机),也可能会提到经典的“预算”解决方案:您可以简单地禁用发送按钮,只要您对输入不满意:

function check5() {
  if(cgiftcardq.value.endsWith('5')){
    send.disabled=true;
    message.innerHTML="Nope, it can not end with 5";
  } else {
    send.disabled=false;
    message.innerHTML="OK";
  }
}
<form>
  <input name="cgiftcardq" class="text_field" id="cgiftcardq" size="3" autocomplete="off" type="text" oninput="check5()">
  <input id="send" type="submit" value="Send" disabled>
</form>
<div id="message"></div>

【讨论】:

    猜你喜欢
    • 2022-11-17
    • 1970-01-01
    • 1970-01-01
    • 2012-07-10
    • 1970-01-01
    • 1970-01-01
    • 2012-04-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多