验证输入类型="数字"

validate input type="number"

本文关键字：quot 数字 输入 类型 验证      更新时间：2023-09-26

我试着做一些编程:我有这个订单表单与不同的输入字段(名称，amountOfProductA, amountOfProductB, amountOfProduct…)，我提交这个表单，经过一些验证，与jquery脚本。

  • 我计划重用代码，产品字段的数量可能会不时变化。
  • 在验证中，我确保至少填写了一个(type="number")产品输入字段。
  • 如果用户在一个产品输入字段中输入了一个数字，而在另一个产品输入字段中错误地输入了一个字符(或一个数字和一个字符)，则表单提交后该字段为空。
  • 因为错误填写的字段提交空，我无法验证这个

你能给我一个提示如何验证这个吗?我应该只使用type="text"输入字段吗?(如何检查是否至少填写了一个产品字段?)

这是我的代码:

jQuery(function ($) {
$('#bttn-submit').click(function () {
    $('input').css('background', '#fff'); // reset BGcolor
    var formOk = true;
    var allProdFields = $('input[type=number]') // Selection of all Product('number') fields
    var numberOfProdFields = allProdFields.length; // How many ('number') fields are there?
    // How many product fields are empty?
    var prodFieldsEmpty = 0;
    for (i = 0; i < numberOfProdFields; i++) {
        if( $(allProdFields[i]).val() == '' || $(allProdFields[i]).val() == 0){
            prodFieldsEmpty++;
            }
    }
    // Is there at least one product field filled?
    if(prodFieldsEmpty == numberOfProdFields){
        var formOk = false; 
        alert('Form not OK');
        allProdFields.css('background', '#f30302');
    }
    // Is the name field filled?
    if( $('#pesoonNaam').val() == '') {
        $('#pesoonNaam').css('background', '#f30302');
        var formOk = false; 
    }
    if( formOk == true ) {
        document.actieForm.submit();
    }
})
})

下面的代码将不允许用户在您的字段中输入数字字符。因为type="number"是html5，并不适用于所有浏览器。

   $(document).on('keydown', '.numeric-input', function(event) {
        var dot_split = $(this).val().split('.');
        if ($.inArray(event.keyCode,[46,8,9,27,13]) !== -1 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) && dot_split.length <= 2) {
            // let it happen, don't do anything
            return;
        }else{
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    })

然后您可以使用。each检查是否有任何字段为空。

prodFieldsEmpty = 0;
$('.numeric-input').each(function(){
   if($(this).val() != ""){
      prodFieldsEmpty++;
   }
})

我希望这对你有帮助!

您可以尝试这样做:

function checkInputs(){
   result = false;
   $('input[type="number"]').each(function(){
       if($(this).val() != '' && isNumeric($(this).val())) result = true;
   })
   return result;
 }

乌利希期刊指南:小提琴

你不应该将验证附加到提交按钮上，因为用户不按它就可以提交表单，而应该将验证附加到表单的提交处理程序上:

jQuery(function ($) {
    $('#formID').submit(
        ...
jQuery有一个each迭代方法，所以: 
    $('input[type=number]').each( function(index) {
       /* do validation */
    });

在每个中，函数的this被设置为当前元素，所以你可以这样做:

     if (this.value == 0) {
        prodFieldsEmpty++;
     }

表单控件的值总是一个字符串，所以测试this.value == 0将返回true，如果值是'0'或''(空字符串)。如果不喜欢使用类型强制转换，那么使用:

     if (this.value === '0' || this.value === '') {

如果你想检查值是否为整数，那么这里有任意数量的答案，最简单的可能是接受的答案这里:

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

注意，这将允许所有类型的数字，例如2.34e3。如果你只想允许正整数，你可以试试:

function isPositiveInt(n) {
  return /^'d+$/.test(n);  // or return !/'D/.test(n)
}

同样，有很多方法可以达到这个目的。

如果您只想检查至少有一个通过，而不是先计算字段的数量然后再检查通过的数量，请设置一个标志:

    var passNumeric = false;
    $('input[type=number]').each( function(index) {
      if (isNumber(this.value)) {
        passNumeric = true;
      } else {
        // do something with fails?
      }
    });

你可以使用else分支来处理失败(或者什么都不做)。

相关文章：