替代许多if语句的jquery

Khairulanam Abdullah

我正在尝试在提交之前使用jquery验证我的表单。用户需要相应地填写任务，他们不能提交填写任务2且缺少任务1的表单。并且Task也不能与其他Task复制。我想知道是否有更好的方法以一种简单的方法来比较所有这些。

我目前正在使用Javascript。仍未完成，因为正在寻找更好的方法。

$(function() {
    $( "#create_model" ).submit(function( event ) {
        if(validate_task()){
            alert("Check your task.");
            event.preventDefault();
        } else {
            $("#create_model").submit();
        }
    });
});

function validate_task() {
    if ($('#CatTask2ID').val() !== "" &&  $('#CatTask2ID').val() === "") {
        return "Task 1 is empty"; //return FALSE;
    } else if ($('#CatTask3ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "")  {
        return "Task 1 or 2 is empty"; //return FALSE;
    } else if ($('#CatTask4ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "")  {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask5ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "")   {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask5ID').val() !== "" &&  $('#CatTask1ID').val() === "" || $('#CatTask2ID').val() === "" || $('#CatTask3ID').val() === "" || $('#CatTask4ID').val() === "")   {
        return "Task 1, 2 or 3 is empty"; //return FALSE;
    } else if ($('#CatTask1ID').val() === $('#CatTask2ID').val() || $('#CatTask1ID').val() === $('#CatTask3ID').val()  .......and others...........  )    {
        return "Duplicates"; //return FALSE;
    }
}

一定的表现

首先使用类而不是ID，以便您可以轻松地获得所有选择的集合，然后将每个选择映射到其值以获取值的数组。

找到第一个值的索引，它是空字符串。如果填充了该值之后的任何值，则返回错误，指出该空字符串的索引为空。

否则，获取填充值（从索引0到第一个空字符串的索引），并检查这些值的集合的大小是否等于数组的长度：

function validate_task() {
  const taskValues = [...$('.tasks')].map(task => task.value);
  const firstEmptyIndex = taskValues.indexOf('');
  if (firstEmptyIndex > 0 && taskValues.slice(firstEmptyIndex).some(val => val)) {
    return `Task ${firstEmptyIndex + 1} is empty`;
  }
  const populatedTasks = taskValues.slice(0, firstEmptyIndex);
  if (populatedTasks.length !== new Set(populatedTasks).size) {
    return 'Duplicates';
  }
  // OK
}

现场演示：

document.addEventListener('change', () => console.log(validateTask()));

function validateTask() {
  const taskValues = [...$('.tasks')].map(task => task.value);
  const firstEmptyIndex = taskValues.indexOf('');
  if (firstEmptyIndex !== -1 && taskValues.slice(firstEmptyIndex).some(val => val)) {
    return `Task ${firstEmptyIndex + 1} is empty`;
  }
  const populatedTasks = taskValues.slice(0, firstEmptyIndex);
  if (populatedTasks.length !== new Set(populatedTasks).size) {
    return 'Duplicates';
  }
  return 'OK'
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>
<select class="tasks">
  <option></option>
  <option>foo</option>
  <option>bar</option>
  <option>baz</option>
  <option>buzz</option>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。