return 空白计数的可重用函数

Question

我有一个 onclick 正在调用一个检查空白的函数。

函数成功突出显示空白字段。

我需要 return 一个名为 'error' 的变量形式的空白计数。

onclick如下：

$('#addUserSubmit').on('click', function(e) {
  e.preventDefault();

  let errors = "";

  let usr = new UserEdit();

  let uobj = {
    addfirstname: $('#addfirstname').val(),
    addlastname: $('#addlastname').val(),
    addemail: $('#addemail').val(),
    // few more 
  }
  
  checkblanks('#addfirstname', '#addfirstnameError');
  checkblanks('#addlastname', '#addlastnameError');
  checkblanks('#addemail', '#addemailError');

  if(errors > 0) {
    return false;
  } else {
    usr.addUser(uobj);
  }
});

使用上面的方法，我希望能够 return 从函数 'checkblanks' 返回错误计数。

这里是函数 checkblanks():

function checkblanks(id, errorid) {
    let error = "";

    if($(id).val() == "") {
        $(errorid).show().text(' cannot be blank');
        $(id).css('border-color', 'red');
        error++;
        return error;
    } else {
        $(errorid).hide();
        $(id).css('border-color', '#ced4da');
    }
}

正如你在上面的例子中看到的，我正在尝试 return 错误。我只是不确定如何在 onClick 中访问它。

上面的工作显示了相应的错误消息。我只需要计算错误数。如何访问 onClick 中的错误计数？

Answer 1

您正在从文本切换到数字 - 并且尝试在多个函数中使用 errors。

在您的第一个函数中更改为 let errors=0，然后像这样：

errors += checkblanks('#addfirstname', '#addfirstnameError');
errors += checkblanks('#addlastname', '#addlastnameError');
errors += checkblanks('#addemail', '#addemailError');

现在，您只需 return 来自 checkblanks 函数的一个数字

function checkblanks(id, errorid) {   
    if($(id).val() == "") {
        $(errorid).show().text(' cannot be blank');
        $(id).css('border-color', 'red');
        return 1;
    } else {
        $(errorid).hide();
        $(id).css('border-color', '#ced4da');
        return 0;
    }
}

Answer 2

一种方法可能类似于：

将检查空白更改为：

function apply_error_state(id, errorid) {
    $(errorid).show().text(' cannot be blank');
    $(id).css('border-color', 'red');
}

function apply_non_error_state(id, errorid) {
    $(errorid).hide();
    $(id).css('border-color', '#ced4da');
}

function has_error(id) {
    return $(id).val() == "";
}

function check_for_errors_in_ids(ids) {
    let error_count = 0;
    
    ids.forEach(function(id) {
        if(has_error(id)) {
            error_count++;
            apply_error_state(id, id + 'Error');
        } else {
            apply_non_error_state(id, id + 'Error');
        }
    });
    
    return error_count;
}

然后在事件处理程序中替换：

  checkblanks('#addfirstname', '#addfirstnameError');
  checkblanks('#addlastname', '#addlastnameError');
  checkblanks('#addemail', '#addemailError');

与：

  errors = check_for_errors_in_ids(['#addfirstname', '#addlastname', '#addemail']);

Answer 3

class UserEdit {
  addUser() {}
}

$('#addUserSubmit').on('click', function(e) {
  e.preventDefault();

  let usr = new UserEdit();
  const fields = ['addfirstname', 'addlastname', 'addemail']
  const uobj = fields.reduce(
    (acc, cur) => ({ ...acc,
      [cur]: $('#' + cur).val()
    }), {}
  )

  const errors = checkblanks(fields)
  console.log({ errors });
  if (errors > 0) {
    return false;
  } else {
    usr.addUser(uobj);
  }
});


function checkblanks(fields) {
  return fields.reduce((acc, cur) => {
    const id = '#' + cur
    const errorid = id + 'Error'
    if ($(id).val() === "") {
      $(errorid).show();
      $(id).css('border-color', 'red');
      return acc + 1
    } else {
      $(errorid).hide();
      $(id).css('border-color', '#ced4da');
      return acc;
    }
  }, 0)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=addfirstname placeholder=firstname />
<div id=addfirstnameError style="display: none">Cannot be blank</div>
<input type=text id=addlastname placeholder=lastname />
<div id=addlastnameError style="display: none">Cannot be blank</div>
<input type=email id=addemail placeholder=email />
<div id=addemailError style="display: none">Cannot be blank</div>
<button id=addUserSubmit>Submit</button>

return 空白计数的可重用函数

Reusable function to return count of blanks

javascript

error-handling

jquery

function