验证薪水输入jQuery

Question

I'm trying to validate input value must be like 1.400,00 and 12.000,00. If input has the correct value, it should remove the disabled class from the else stays disabled.

I tried like this but did't get success :(

<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");
    }
});

Can anyone help how can achieve this condition?

Thanks in advance

Answer 1

Your regex is way out, something like this gets you a little closer:

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

Which looks for:

• 1-2 digits
• a literal .
• 3 digits
• a literal ,
• 2 digits

You may like to enhance this to make the decimal portion optional.

From there, you need to actually parse the string to a number to check it is within the valid numerical range (as, for example 95.000,00 would pass on a regex check, but not in the range check.

Answer 2

The number input value is a ... Number , so you can just use a numeric comparison, no RegExp needed. Furthermore, the keyup event will not trigger if you use a mouse to increment or decrement its value.

Here's a snippet that continuously checks the salary input value, enables or disables the button as applicable and shows a message about the input value validity. To make your live even easier, for a [type=number] -input you can also set a minimum and maximum value by the way (used in the snippets checkValue method).

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>