提问人：John Beasley 提问时间：5/22/2021 最后编辑：halferJohn Beasley 更新时间：6/7/2021 访问量：64
可重用函数返回空白计数
Reusable function to return count of blanks
问：
我有一个 onclick，它正在调用一个检查空白的函数。
该函数成功突出显示空白字段。
我需要以名为“error”的变量的形式返回空白计数。
点击如下：
$('#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');
}
}
正如您在上面的示例中看到的，我正在尝试返回错误。我只是不确定如何在onClick中访问它。
以上内容用于显示相应的错误消息。我只需要获取错误的计数。如何访问 onClick 中的错误计数？
答：
2赞
Kinglish
5/22/2021
#1
您正在从文本切换到数字 - 并尝试在多种功能中使用。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;
}
}
评论
1赞
John Beasley
5/22/2021
你有天才级别的智力，我的朋友。如此简单的解决方案，当我尝试编写一个又一个函数以尝试获取错误计数时。谢谢你,先生。
1赞
Ben Stephens
5/22/2021
#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']);
0赞
bel3atar
5/22/2021
#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>
评论