Question

如何简单地使用这个脚本。我几乎没有选择，我想使用简单的验证一切正常，但我想让这个脚本更短。

我不想使用任何库来验证

$("#form").submit(function (e) {
 var tmp = $('#select-1').val();
 var tmp1 = $('#select-2').val();
 var tmp2 = $('#select-3').val();
 var error = $('#error-1');
 var error2 = $('#error-2');
 var error3 = $('#error-3');
 if (tmp == '0' || tmp == 'Select') {
  e.preventDefault();
  error.show();
} else {
  error.hide();
}
if (tmp1 == '0' || tmp1 == 'Select') {
  e.preventDefault();
  error2.show();
} else {
  error2.hide();
}
if (tmp2 == '0' || tmp2 == 'Select') {
 e.preventDefault();
 error3.show();
} else {
 error3.hide();
}
});
});

这里是html代码

<form action="" id="form">
    <div>

        <label for="select-1">Value 1</label>
        <select id="select-1">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
        <i id="error-1" class="error">Error</i>
    </div>
     <div>

        <label for="select-2">Value 2</label>
        <select id="select-2">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
         <i  id="error-2" class="error">Error</i>
    </div>
     <div>

        <label for="select-3">Value 3</label>
        <select id="select-3">
            <option value="0">Select</option>
            <option value="1">Select 1</option>
            <option value="2">Select 2</option>
            <option value="3">Select 3</option>
        </select>
         <i  id="error-3" class="error">Error</i>
    </div>
    <div> <button type="submit" id="formsubmission">Submit</button></div>
</form>

Answer 1

我觉得这样的事情会起作用

$("select").each(function (index) {
    if ($(this).val() == '0' || 'Select') {
        e.preventDefault();
        $(this).next(".error").show();
     } else {
     $(this).next(".error").hide();
    }

});

Answer 2

不要重复自己（干）。你基本上做了3次同样的事情。您可以使用$.each循环选择元素并在那里进行验证。

$("#form").submit(function (e) {
    $.each("select", function(i,el) {
        var val = $(el).val();  
        if(val == '0' || val == 'Select') {
            $("#error-"+i).show();
            e.preventDefault();
        }
        $("#error-"+i).hide();
    });
});

这会将你从27行减少到10行。

Answer 3

更通用：

$(function() {
  $("#form").submit(function(e) {
    check(1, e);
    check(2, e);
    check(3, e);
  });
});

function check(id, e) {
  var tmp = $('#select-' + id).val();
  var error = $('#error-' + id);
  if (tmp == '0' || tmp == 'Select') {
    e.preventDefault();
    error.show();
  } else {
    error.hide();
  }
}

Plunker

您甚至可以将字符串传递给此例程，例如check（'Price'，e），以获得更多可读的html-id（id =“select-Price” - id =“error-Price”）。此外，还可以通过为应该触发错误的值添加另一个参数来改进这一点。

jquery验证只需选择

3 个答案: