Question

在提交时，JavaScript脚本会使用class="required"获取所有表单元素，如果它们为空，则会显示一个警告框，“您必须填写某某”？

我在考虑if - else，在if部分，我们会得到一个循环遍历所有while元素的class=required，并且else将提交表单。

Answer 1

互联网上有许多JavaScript库正是这样做的。

试试这个：

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

或尝试使用Google搜索JavaScript表格验证。

Answer 2

循环遍历表单的元素并检查具有某个类的值是否具有满足特定条件的值是相当容易的：

<form name="f0" onsubmit="return validate(this);">
  <input name="inp0" class="required" >
  <input name="inp2" class="required" >
  <input type="submit">
</form>

<script type="text/javascript">

var validate = (function() {
  var reClass = /(^|\s)required(\s|$)/;  // Field is required
  var reValue = /^\s*$/;                 // Match all whitespace

  return function (form) {
    var elements = form.elements;
    var el;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      el = elements[i];

      if (reClass.test(el.className) && reValue.test(el.value)) {
        // Required field has no value or only whitespace
        // Advise user to fix
        alert('please fix ' + el.name);
        return false;
      }
    }
  }
}());

</script>

以上只是展示策略的一个例子。

使用警报不是最佳的，通常在所需字段旁边放置一个区域，以便可以在那里写入错误消息以引导用户注意无效字段。您也可以一次性设置所有错误消息，然后返回，而不是一次一个。

编辑 - 更新多个错误

要使用类似于元素的id验证每个控件旁边的元素，因此如果输入名为 firstName ，则错误元素的id可能为 firstName-err < / em>的。当发现错误时，很容易获得相关元素并在其中添加消息。

要一次执行所有操作，请使用标记来记住是否存在任何错误，例如“isValid”默认情况下设置为true。如果发现任何错误，请将其设置为false。然后在最后归还。

使用上面的示例，HTML可能如下所示：

<input name="firstName" class="required" > <span id="firstName-err" class="errMsg"></span>

firstName 的错误将写入 firstName-err 。

在脚本中，如果发现错误：

// At the top var isValid = true; var errEl; ... // When entering the for loop el = elements[i]; errEl = document.getElementById(el.name + '-err'); // when error found isValid = false; if (errEl) errEl.innerHTML = '... error message ...'; // else if error not found // remove message whether there is one or not if (errEl) errEl.innerHTML = ''; ... // At the end return isValid;

您还可以使用弹出窗口显示错误，但这确实很烦人，用户必须关闭弹出窗口才能修复错误。更好的做法就是在每个错误旁边写下错误的内容并让用户在自己的时间内解决问题。

根据类验证表单必填字段？

2 个答案:

编辑 - 更新多个错误