Question

我想验证myForm，因此用户可以输入介于99和1之间的值。当我提交一个数字时，我会显示一个空白页面，即select.php。但我想留在我的索引页面上，并收到消息“你在下面”。任何人都可以看到这里有什么问题吗？

的index.html：

<div class="content">
        <p id="number"></p>
        <div class="form">


                <form id="myForm" action="select.php" method="post">
                    <input type="number" name="numbervalue" id="numberinput">
                    <input type="submit" id="sub" Value="Submit">
                    <span id="result"></span>
                    <span id="testnumber"></span>
                </form> 

        </div>
    </div>

JS：

    var minNumberValue = 1;
var maxNumberValue = 99;

$('#sub').click(function(e){
    e.preventDefault();
    var numberValue = $('input[name=numbervalue]').val();
    if(isNaN(numberValue) || numberValue == ''){
    $('#testnumber').text('Please enter a number.')
    return false;
  }
  else if(numberValue < minNumberValue){
    $('#testnumber').text('You are below.')
    return false;
  }
  else if(numberValue > maxNumberValue){
    $('#testnumber').text('You are above.')
    return false;
  }
  return true;
});


// Insert function for number
function clearInput() {
    $("#myForm :input").each( function() {
         $(this).val('');
    });
}

    $(document).ready(function(){
       $("#sub").click( function(e) { 
        e.preventDefault(); // remove default action(submitting the form) 
       $.post( $("#myForm").attr("action"), 
         $("#myForm :input").serializeArray(), 
         function(info){            
         $("#result").html(info);
       });
       clearInput();
    });
    });



// Recieve data from database
$(document).ready(function() {
      setInterval(function () {
        $('.latestnumbers').load('response.php')
      }, 3000);
    });

Answer 1

如何使用＆＃39; min ＆＃39;和＆＃39; 最大＆＃39; 输入标记的属性，它将处理所有验证本身：

<input type="number" name="numbervalue" min="1" max="99">

干杯，

Answer 2

这是一个验证数字的小功能：

var minNumberValue = 1;
var maxNumberValue = 99;

$('#sub').click(function(e){
    e.preventDefault();
    var numberValue = $('input[name=numbervalue]').val();
    if(isNaN(numberValue) || numberValue == ''){
    $('#result').text('Please enter a number.')
    return false;
  }
  else if(numberValue < minNumberValue){
    $('#result').text('You are below.')
    return false;
  }
  else if(numberValue > maxNumberValue){
    $('#result').text('You are above.')
    return false;
  }
  return true;
});

您可以通过更改两个变量来定义最小值和最大值（如果您要提交到服务器，请务必检查这些服务器端，因为用户可以通过开发工具操作代码来更改这些边界或提交无论他们想要什么。）

结果消息显示在span#result中，否则您也可以使用alert()。

这里重要的是点击功能中的e参数（它是JavaScript事件），调用e.preventDefault()（如果你不这样做，表单将在完成验证之前提交，如input[type=submit]的默认操作是提交表单[go figure ...]），在条件不满足时返回false，如果满足验证则返回true 。 return true;允许表单遵循其操作参数。

这是一个小提琴：https://jsfiddle.net/3tkms7vn/（编辑：忘记提及，我评论了return true;并将其替换为向span#result添加消息以阻止提交的jsfiddle。）

Jquery min和max显示新页面

2 个答案: