Jquery 最小值和最大值显示新页面

Jquery min and max show new page

本文关键字：显示 新页面 最大值 最小值 Jquery      更新时间：2023-09-26

我想验证myForm，以便用户可以在99上输入一个介于1和max之间的值。当我提交一个数字时，我会看到一个空白页，这是选择.php。但我想留在我的索引页面上，并收到消息"你在下面"。谁能看出这里出了什么问题？

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

如何利用输入标签的"min"和"max"属性，它将处理所有验证本身：

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

干杯

这里有一个小函数来验证这个数字：

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()。

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

并对此进行摆弄：https://jsfiddle.net/3tkms7vn/（编辑：忘了提及，我注释掉了return true;并将其替换为调用以向span#result添加消息，以防止在jsfiddle上提交。

相关文章：