Question

我正在进行一些JavaScript验证，需要一种打印错误消息的方法。

我有一个名为errorList的数组，我有一个div，我想将数组内容打印出来，称为divErrorList。

我有一个将错误添加到数组的函数：

errorList[errorList.length] = errorArray;

所以现在我想打印errorList，也许使用innerHTML？

虽然我已经尝试了这个，但我没有收到错误，但我也没有看到错误列表被打印出来。

document.getElementById("divErrorList").innerHTML+=(errorList[i]);

Answer 1

由于您不想发布基本代码，我假设errorArray是......数组？

所以errorList是一个数组数组？然后你需要一个嵌套循环，或像这样加入每个错误：

var errorList = [
    ['error 1.1', 'error 1.2'],
    ['error 2.1'],
    ['error 3.1', 'error 3.2', 'error 3.3'],
    ['error 4.1', 'error 4.2']
];

var errorString = "";

// for each errorArray
for(var i=0, len=errorList.length; i<len; i++){
    // join the errorArray
    errorString += '<h1>ErrorArray #'+ i +'</h1>'
    +'<ul><li>'+ errorList[i].join('</li><li>') +'</li></ul>';
}

document.body.innerHTML = errorString;

JS Fiddle Demo

Answer 2

使用错误填充数组的简单方法如下：

为您的元素分配data-validate和data-error属性：

<form name="myForm">
  * Name
  <input name=Name data-validate=text data-error="Name cannot be empty"> <br>
  * Email
  <input name=Email data-validate=email data-error="Invalid Email"> <br>
  * Message
  <textarea name=Message data-validate=text data-error="Enter a Message">
  </textarea> <br>
  <input type="submit">
</form>

<div id="divErrorList"></div>

缓存选择器：

var myForm = document.forms.myForm;
var divError = document.getElementById("divErrorList");

创建一个包含所有必需的验证方法的Object：

var validator = {
  text  : function(val) { return !/^\s*\S+.*/.test(val); },
  email : function(val) { return !/\S+@\S+\.\S+/.test(val); }
};

^{（您可以另外改进上面的正则表达式）}

在您submit表单后，您使用this.elements检查所有表单元素，确认其中包含data-validate后，您只需为该字段调用相应的验证方法

如果您的验证方法返回true意味着某个字段未通过测试，那么您可以继续.push()并将errors数组存储在该元素的data-error数组中{1}}属性：

function validateForm(event) {
  var errors = [];
  var el = this.elements;
  for(var i=0; i<el.length; i++){
    var data = el[i].dataset;
    var validateType  = data.validate;
    var validateError = data.error;
    if(validateType){ // "text", "email", ...
        if(validator[validateType](el[i].value)) errors.push( validateError );
    }
  }
  // Check for errors length and write to DIV...*
}

myForm.onsubmit = validateForm;

（*）比，（总是在同一个函数内）你只需检查errors数组长度，如果有一些错误，你可以通过将数组键加到{{1}来将错误写入元素（例如）

<br>

  if(errors.length){
    event.preventDefault();
    divError.innerHTML = errors.join("<br>");
  }

var myForm = document.forms.myForm;
var divError = document.getElementById("divErrorList");

var validator = {
  text  : function(val) { return !/^\s*\S+.*/.test(val); },
  email : function(val) { return !/\S+@\S+\.\S+/.test(val); }
};

function validateForm(event) {
  var errors = [];
  var el = this.elements;
  for(var i=0; i<el.length; i++){
  	var data = el[i].dataset;
  	var validateType  = data.validate;
  	var validateError = data.error;
    if(validateType){ // "text", "email", ...
    	if(validator[validateType](el[i].value)) errors.push( validateError );
    }
  }
  if(errors.length){
    event.preventDefault();
    divError.innerHTML = errors.join("<br>");
  }
}

myForm.onsubmit = validateForm;

将数组内容打印为字符串

2 个答案:

JS Fiddle Demo