我正在尝试验证输入值必须像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");
}
});
任何人都可以帮助达到这个条件吗?
预先感谢
答案 0 :(得分:1)
您的正则表达式很麻烦,像这样使您更近一些:
^ \ d {1,2}。\ d {3},\ d {2} $
寻找的人:
.
,
您可能希望对此进行增强,以使小数部分为可选。
从那里,您实际上需要将字符串解析为一个数字,以检查它是否在有效数字范围内(例如,95.000,00
将通过正则表达式检查,但不会通过范围检查。< / p>
答案 1 :(得分:0)
数字输入值为... Number
,因此您可以使用数字比较,而无需RegExp
。此外,如果您使用鼠标增加或减少其值,则keyup
事件将不会触发。
这里有一个代码片段,可不断检查薪水输入值,在适用时启用或禁用按钮,并显示有关输入值有效性的消息。为了使您的生活更加轻松,对于[type=number]
输入,您还可以通过设置最大值和最小值(在摘要checkValue
方法中使用)。
(() => {
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>