Question

我有一个名为foo的参数。我使用API将呼叫发送到端点，如果成功，端点将使用相关的有效负载数据填充foo。 foo具有许多属性，例如：

标题
姓氏
姓
阿布拉卡达布拉宫

我要使用jQuery进行的操作是，一旦所有这些属性都填充完毕，然后我便要遍历所有这些属性，并检查这些属性是否未填充或的长度等于零。如果是这种情况，那么我想显示一个errorMesssage类，但仅针对该特定属性。

这是我用来显示元素的当前代码：

function createApplicationVerification1(customerData) {
    var customerOne =
        "<div class='row'><strong>Person 1:</strong></div><br />" +
        "<div class='row validation-row'>" +
        "<div class='col-md-6'><span>Title</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.p1Title) +
        "</span></div>" +
        "<div class='col-md-1'>" +
        validateField(customerData.p1Title) +
        "</div>" +
        "</div>" +
        "<div class='row validation-row'>" +
        "<div class='col-md-6'><span>Forename</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.p1Forename) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.p1Forename) +
        "</span></div>" +
        "</div>" +
        "<div class='row errorRow'><div class='col-md-6'> </div><div class='col-md-6 errorMessage'></div></div>" +
        "<div class='row validation-row'>" +
        "<div class='col-md-6'><span>Surname</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.p1Surname) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.p1Surname) +
        "</span></div>" +
        "</div>" +
        "<div class='row validation-row'>" +
        "<div class='col-md-6'><span>DOB</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.p1Dob.substring(0, 10)) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.p1Dob) +
        "</span></div>" +
        "</div>" +
        "<div class = 'row validation-row'>" +
        "<div class='col-md-6'><span>Address</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.app1Address) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.app1Address) +
        "</span></div>" +
        "</div>" +
        "<div class = 'row validation-row'>" +
        "<div class='col-md-6'><span>Town</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.app1Town) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.app1Town) +
        "</span></div>" +
        "</div>" +
        "<div class = 'row validation-row'>" +
        "<div class='col-md-6'><span>Postcode</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.app1Postcode) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.app1Postcode) +
        "</span></div>" +
        "</div>" +
        "<div class = 'row validation-row'>" +
        "<div class='col-md-6'><span>Country Code</span></div>" +
        "<div class='col-md-5' id ='applicantInfo'><span>" +
        checkIfEmpty(customerData.countryCode) +
        "</span></div>" +
        "<div class='col-md-1'><span>" +
        validateField(customerData.countryCode) +
        "</span></div>" +
        "</div>";

    return customerOne;
}

一旦这些数据被填充，我就调用一个checkForErrors()函数，

function checkForErrors() {
    $(foo.childNodes).each(function () {
        $(foo).filter(function () {
            return $(foo, this).length == 0;
        });
        $(".errorMessage").text("Required Field.");
        $(".errorMessage").css("display", true);
    });
}

我的想法是，对于每个foo.childNodes，如果它与长度等于0的过滤器匹配，那么我希望它显示errorMessage。

与此相关，我遇到了2个问题。

childNodes引发错误并破坏了js。
因为类名不是唯一的，所以一旦我得到一个匹配长度为0的规则的属性，它就会显示所有属性的错误消息。

下图是我要实现的目标的粗略示例：

这是我目前得到的：

我得到这个是因为这个html元素的类在整个过程中都是相同的。

与必须定义每个errorMessage的ID相比，如何以更好的方式完成验证检查？

Answer 1

您应根据标准构建代码。

不重复。创建一个函数：

function createItem(title, value = "") {
  var isValid = validateField(value); //not sure what you have in mind with that function but
  //you should create dom elements https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
  return "<div class='row validation-row'>" +
         "<div class='col-md-6'><span>" + title + "</span></div>" +
         "<div class='col-md-5' id ='applicantInfo'>" + value + "<span>" +
         "<div class='col-md-1'><span>" +
         (isValid ? "<span>Y</span>" : "<span>X</span>") +
         "</span></div>" +
         "<div>" + (value.length === 0 ? "" : "<span>Required Field.</span>") + "</div>" +
         "</div>";
}

使用您的数据调用该函数。

function createApplicationVerification1(customerData) {
   var r = "<div class='row'><strong>Person 1:</strong></div><br />";
   r += createItem('Title', customerData.p1Title);
   r += createItem('Forename', customerData.p1Forename);
   // ...
   return r + "</div>";
}

您根本不需要checkForErrors。创建您的dom节点时，不要遍历dom节点。

如何动态检查空参数？

1 个答案: