Question

基本上，我有一个包含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);">

我的错误是什么？

PS。我在控制台中没有收到任何错误。

Answer 1

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

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来检测更改。

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

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 );
    // ...
});

您还可以通过引用其类来为一组元素添加事件侦听器。

最后：

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

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

Answer 2

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

<强> 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();
  }
});

DEMO： http://jsbin.com/oCobAfUJ/1/edit

Answer 3

更改将参数传递给pointAndNumbersOnly函数的方式，它应该有效：

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

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

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

Answer 4

首先，使用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;
    }
}

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

4 个答案: