验证薪水输入jQuery

时间:2018-08-10 11:25:17

标签: javascript jquery html

我正在尝试验证输入值必须像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");
    }
});

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

预先感谢

2 个答案:

答案 0 :(得分:1)

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

  

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

寻找的人:

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

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

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

答案 1 :(得分:0)

数字输入值为... 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>