javascript - 使用数据范围进行表单验证

Question

我正在尝试验证 HTML 表单。检查具有其他两个相对范围字段的字段。我想isset在提交表单之前检查所有变量以及范围之间。我尝试了这种方法没有给出预期的结果。我怎样才能用其他最简单的方法来做到这一点。

$("#form").submit(function(e){
  e.preventDefault();
  e.stopImmediatePropagation();
var apple = $('.apple').val();
var aFirst = $('.aFirst').val();
var aLast = $('.aLast').val();

var banana = $('.banana').val();
var bFirst = $('.bFirst').val();
var bLast = $('.bLast').val();

var orange = $('.orange').val();
var oFirst = $('.oFirst').val();
var oLast = $('.oLast').val();
if(apple >= aFirst && apple <= aLast){
    var a = 'true';
}else{
  var a = 'false';
}
if(banana >= bFirst && banana <= bLast){
    var b = 'true';
}else{
  var b = 'false';
}
if(orange >= oFirst && orange <= oLast){
    var o = 'true';
}else{
  var o = 'false';
}

if(a == 'true' && b == 'true' && o == 'true')
{
  alert('success');
  //do ajax
}else{
  alert('error');
 }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form">
   <div class="form-group col-md-12">
            <label>Apple Price:</label>
            <input type="number" class="apple" placeholder="Type between 15-25">
            <input type="hidden" class="aFirst" value="10">
            <input type="hidden" class="aLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Banana Price:</label>
            <input type="number" class="banana" placeholder="Type between 10-20">
            <input type="hidden" class="bFirst" value="10">
            <input type="hidden" class="bLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Orange Price:</label>
            <input type="number" class="orange" placeholder="Type between 10-20">
            <input type="hidden" class="oFirst" value="10">
            <input type="hidden" class="oLast" value="20">
    </div>
   <button type="submit" id="submit">Submit</button>
 </form>

标签： javascriptjquery

Answer 1

苹果的隐藏输入类应该是aFirstand aLast：

更新：我已更正以下行：

<input type="hidden" class="aLast" value="25">

更新 2：删除水果 div 时有效。+清理。

$("#form").submit(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var apple = $('.apple').val();
        var aFirst = $('.aFirst').val();
        var aLast = $('.aLast').val();

        var banana = $('.banana').val();
        var bFirst = $('.bFirst').val();
        var bLast = $('.bLast').val();

        var orange = $('.orange').val();
        var oFirst = $('.oFirst').val();
        var oLast = $('.oLast').val();

        var a = true;
        var b = true;
        var o = true;

        if (apple == "" || apple < aFirst || apple > aLast) {
            a = false;
        }
        if (banana == "" || banana < bFirst || banana > bLast) {
            b = false;
        }
        if (orange == "" || orange < oFirst || orange > oLast) {
            o = false;
        }

        if (a && b && o) {
            alert('success');
            //do ajax
        } else {
            alert('error');
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form">
  <div class="form-group col-md-12">
            <label>Banana Price:</label>
            <input type="number" class="banana" placeholder="Type between 10-20">
            <input type="hidden" class="bFirst" value="10">
            <input type="hidden" class="bLast" value="20">
    </div>
  <div class="form-group col-md-12">
            <label>Orange Price:</label>
            <input type="number" class="orange" placeholder="Type between 10-20">
            <input type="hidden" class="oFirst" value="10">
            <input type="hidden" class="oLast" value="20">
    </div>
   <button type="submit" id="submit">Submit</button>
 </form>