Jquery 字段清除问题

Question

您可以看到下面的代码片段是为了防止字符和只允许数字而编写的。它进入 if 条件，但该字段未清除。

$(document).on('keyup', '.childfield', function(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
console.log("Entered");
return false;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

希望有人能找到我做错了什么。

Answer 1

请尝试以下代码，仅用于数值

$(document).on('keyup', '.childfield', function(e) {
if (/D/g.test(this.value))
{
this.value = this.value.replace(/D/g, '');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

Answer 2

这是一个有用的方法，也可以处理粘贴

你不应该立即 ajax。要么去抖动，要么等待进入

const re = /[^0-9a-zA-Z]+/g
$(document).on('input', '.childfield', function(e) {
let val = this.value;
if (re.test(val)) {
console.log("invalid input")
this.value=val.replace(re,"")
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="childfield" value="0">

输入时提交

const re = /[^0-9a-zA-Z]+/g
$(function() {
$(document).on('input', '.childfield', function(e) { 
let val = this.value;
if (re.test(val)) {
console.log("invalid input")
this.value = val.replace(re, "")
}
});
$("#form1").on("submit", function(e) {
e.preventDefault(); // stop submitting
if (re.test($("#form1 .childField").val())) { // not even possible but still
return;
}
// $.ajax()... // here you can send
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<input type="text" class="childfield" value="0" />
</form>