代码之家 › 专栏 › 技术社区 › John Beasley

返回空白计数的可重用函数

error-handling function jquery javascript

John Beasley · 技术社区 · 5 年前

我有一个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);
  }
});

使用上述方法,我希望能够从函数“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');
    }
}

上面的代码用于显示相应的错误消息。我只想知道错误的数量。

2 回复 | 直到 5 年前

Kinglish 5 年前

你正在从文本切换到数字-再加上试图利用 errors 多种功能。

在您的第一个函数中更改为 let errors=0 ,然后是这样的:

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

现在,您只需要返回 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;
    }
}

Ben Stephens 5 年前

一种方法可以是:

将复选框更改为:

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']);

bel3atar 5 年前

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>