javascript - 验证表单

Question

IM 正在处理一个简单的表单，我正在尝试验证字段， 使用以下代码，我能够验证该字段并在该字段为空时添加一条消息。

Answer 1

首先您需要扫描页面中的标签:

  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }

然后您可以简单地在您的 IF-ELSE 条件中使用以下内容，

document.getElementById(id).label.classList.add('red-text');

和

document.getElementById(id).label.classList.remove('red-text');

我还添加了 CSS 类，使文本变为红色。

.red-text {
  color: #ff0000;
}

最终代码:

function validation(id) {
  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }
  var value = document.getElementById(id).value;
  if (value === "" || value == null) {
    document.getElementById('Err' + id).innerHTML = "- Field Required";
    document.getElementById(id).classList.add('class');
    document.getElementById(id).label.classList.add('red-text');
  } else {
    document.getElementById('Err' + id).innerHTML = "";
    document.getElementById(id).classList.remove('class');
    document.getElementById(id).label.classList.remove('red-text');
  }
}

.class {
  background: #f97d7d;
  color: #ff0000;
  border: 1px solid #ff0000 !important;
}

.red-text {
  color: #ff0000;
}

<label for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">