为什么我的正则表达式没有为我的文本输入返回正确的值

Why isn't my regex returning the correct value for my text input?

本文关键字：我的 返回 输入 文本 正则表达式 为什么      更新时间：2023-09-26

所以基本上，我有一个包含50多个文本输入的大型表单。

我正在通过 onKeyPress 对所有这些应用一个函数，以确保它们只是使用一个小数点的数字。

这是我的正则表达式函数：

function pointAndNumbersOnly(inputString)
{
    return inputString.match(/^[0-9]*'.?[0-9]*$/);
}

这是我的一个文本输入示例：

<input type="text" pattern="'d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10" onkeypress="return pointAndNumbersOnly(this.id);">

我在这里犯了什么错误？

附言。我的控制台中没有收到任何错误。

在看到所有其他答案并研究您的问题后，我认为这就是您想要的。

.HTML： 

<input type="text" pattern="'d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10"/>

在 JavaScript 中附加事件，并在输入无效时防止默认行为。通过使用 keypress 事件，您可以准确读取当前字符，将其追加到已读取的值（不包括刚刚键入的字符），然后通过验证。

JavaScript：

function isValidNumber(str) {
  return /^'d*'.?'d*$/.test(str);
}
document.getElementById('priceGST').addEventListener('keypress', function(e) {
  var char = String.fromCharCode(e.which);
  if (! isValidNumber(this.value + char)) {
    e.preventDefault();
  }
});

演示：http://jsbin.com/oCobAfUJ/1/edit

让我们从正则表达式的使用开始，你应该这样做：

var inputString = document.getElementById('priceGST').value;
var regex = /^[0-9]*'.?[0-9]*$/;
var valid = regex.test(inputString);

所以这对你来说应该很好：

function pointAndNumbersOnly(inputString)
{
    var regex = /^[0-9]*'.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}
var inputString = document.getElementById('priceGST').value;
var valid = pointAndNumbersOnly(inputString);

不过还有其他选择：

function pointAndNumbersOnly(inputString)
{
    var regex = /^[0-9]*'.?[0-9]*$/;
    var valid = regex.exec(inputString);
    return valid;
}
var inputString = document.getElementById('priceGST').value;
var valid = pointAndNumbersOnly(inputString);

让我们通过只要求下推元素而不是它们的值来使您的函数变得更好：

function pointAndNumbersOnly(inputElement)
{
    var inputString = inputElement.value;
    var regex = /^[0-9]*'.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}
var inputElement = document.getElementById('priceGST');
var valid = pointAndNumbersOnly(inputElement);

现在另一件事：

使用html属性，如onkeypress，click等......是不好的习惯，因为我们想将HTML和JavaScript分开。此外，onkeypress一开始就是一个问题制造者，因为它并不总是按照你的想法去做。最好使用 change 、 keyup 和 keydown 来检测更改。

我们不想使用onkeypress="return pointAndNumbersOnly(this.id);而是使用事件委托来检测 dom 中的更改，使用我们新的更改事件：

function pointAndNumbersOnly(inputElement)
{
    var inputString = inputElement.value;
    var regex = /^[0-9]*'.?[0-9]*$/;
    var valid = regex.test(inputString);
    return valid;
}
inputElement.addEventListener("change, keyup, keydown", function(e)
{
    var inputElement = document.getElementById('priceGST'); // Makes more sense to use this
    var valid = pointAndNumbersOnly(inputElement );
    // ...
});

还可以通过引用事件侦听器的类将事件侦听器添加到一组元素中。

最后：

确保 JavaScript 是在 DOM 准备就绪后定义的，也就是说，确保将 JavaScript 添加到正文底部，以便 HTML 存在，或者您具有 jQuery 的 .ready 函数等功能，可以检测何时加载 DOM 并允许其中的 JavaScript 执行，否则它不会知道 HTML ID，例如 id="priceGST" 。

如果你定义你的JavaScript并尝试引用HTML id，那么你会看到它们是undefined的，或者只是null，因为它们在那个特定的点不存在。

更改将

参数传递给 pointAndNumbersOnly 函数的方式，它应该可以工作：

onkeypress="return pointAndNumbersOnly(this.val());"

编辑：如前所述，上述解决方案是JQuery。使用Javascript应该是：

onkeypress="return pointAndNumbersOnly(this.value);"

首先，使用onkeyup而不是onkeypress，因为当使用onkeyup时，你可以得到this.value作为你刚刚输入的内容，onkeypress将得到你之前输入的值。

例如，输入框的当前值为 10，而您要输入 101。

onkeyup 将得到 this.value = 101，

onkeypress 将得到 this.value = 10。

正如我将要做的，我将设置一个preValue，如果当前值无效，则将this.value设置为preValue。

就像这样：

//html
<input onkeyup="return pointAndNumbersOnly(this);" type="text" pattern="'d*" class="form-main" name="priceGST" id="priceGST" placeholder="Enter GST without % sign" value="10">
//js
function pointAndNumbersOnly(obj){
    var key = 'price'+obj.id;
    //.2 will be valid here. If not,use /^[0-9]+'.?[0-9]*$|^$/ instead
    if(obj.value.match(/^[0-9]*'.?[0-9]*$/) !== null) {
        window[key] = obj.value;
        return true;
    }else {
        obj.value = window[key];
        return false;
    }
}
相关文章：