Question

我正在尝试验证输入值必须像1.400,00和12.000,00。如果输入具有正确的值，则应从其他保持禁用状态的状态中删除禁用的类。

我试图这样，但没有成功：（

<input id="ex2" class="salary" type="number" placeholder="1.400,00 - 12.000,00" name="salaryRange2"/>

<a href="#" id="checkSalary1" class="btn next disabled">Next Step</a>

$("#ex2").on("keyup", function(){
    var valid = /^\d{1,6}(?:\.\d{0,2})?$/.test(this.value),
        val = this.value;

    if(valid){
        console.log("Invalid input!");
        this.value = val.substring(0, val.length - 1);
        $("#checkSalary1").removeClass("disabled");
    }
    else{
        $("#checkSalary1").addClass("disabled");
    }
});

任何人都可以帮助达到这个条件吗？

预先感谢

Answer 1

您的正则表达式很麻烦，像这样使您更近一些：

^ \ d {1,2}。\ d {3}，\ d {2} $

寻找的人：

1-2位数字
文字.
3位数字
文字,
2位数字

您可能希望对此进行增强，以使小数部分为可选。

从那里，您实际上需要将字符串解析为一个数字，以检查它是否在有效数字范围内（例如，95.000,00将通过正则表达式检查，但不会通过范围检查。< / p>

Answer 2

数字输入值为... Number，因此您可以使用数字比较，而无需RegExp。此外，如果您使用鼠标增加或减少其值，则keyup事件将不会触发。

这里有一个代码片段，可不断检查薪水输入值，在适用时启用或禁用按钮，并显示有关输入值有效性的消息。为了使您的生活更加轻松，对于[type=number]输入，您还可以通过设置最大值和最小值（在摘要checkValue方法中使用）。

See also

(() => {
  const inputElement = document.querySelector("#ex2");
  const report = document.querySelector("#report");
  const bttn = document.querySelector("button");
  const getAction = cando => cando ? "removeAttribute" : "setAttribute";
  const checkVal = val => val
      && val >= +inputElement.getAttribute("min")  
      && val <= +inputElement.getAttribute("max");
  const messages = {
    cando: "Ok to submit",
    noValue: "Waiting for input (1.400,00 - 12.000,00)",
    invalid: "Value should be from 1.400,00 up to 12.000,00"
  };
  
  inputElement.focus();
  checkValue();

  function checkValue() {
    const val = inputElement.value;
    const cando = checkVal(val);
    report.innerHTML = !val 
      ? messages.noValue
      : cando
        ? messages.cando
        : messages.invalid;
    bttn[getAction(cando)]("disabled", true);
    return setTimeout(checkValue, 200);
  }
})();

<input id="ex2" 
  class="salary" 
  type="number"
  min="1400" 
  max="12000"
  step="0.01"
  name="salaryRange2"/>

<button disabled>submit</button> <span id="report"></span>

验证薪水输入jQuery

2 个答案: