Question

我正在尝试在JavaScript中创建一个类来验证表单。这将检查表单元素并验证字段是否具有特定属性。

但是，对getAttribute的调用未返回值。它没有在另一个变量中获取值，但是，如果我打印，它运行良好。

这是我班级的代码：

function valida() {
    document.getElementById("msgDiv").innerHTML="";
    var totalErros=0; 
    var x=document.getElementById("frm1");
    for (var i=0;i<x.length;i++){
        var input=document.getElementsByTagName("input")[i];
        var campo=input.getAttribute("id");
        var tipo=input.getAttribute("tipo");
        var nome=input.getAttribute("nome");
        var id=campo.toString(); //the error goes here
        //var valor=_$(id).value;
        alert(campo);

        switch (tipo) {
            case "obrigatorio":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "oemail":
                if(document.getElementById(id).value==""){
                    document.getElementById("msgDiv").innerHTML+="Deu erro no campo "+nome+"<br />"; 
                    totalErros++;}
                    break
            case "email":
                if(!ValidaEmail(document.getElementById(id).value)){
                    document.getElementById("msgDiv").innerHTML+="O "+nome+" que você informou é inválido "+document.getElementById(id).value+"  <br />"; 
                    totalErros++;}
                    break
            default:
                document.getElementById("msgDiv").innerHTML+="<br />";
        }            
    }
    if(totalErros==0) {  
        document.getElementById("msgDiv").innerHTML="Agora foi "+ totalErros;
        return true;
    }
}

Answer 1

你的问题是：

var input=document.getElementsByTagName("input")[i];
var campo=input.getAttribute("id");
//...
var id=campo.toString(); //the error goes here

您将获得一个给定的输入元素并将其存储在变量input中。然后，您将获取该元素的ID并将其存储在变量campo中。然后你拿campo并在上面调用toString（）。

问题是至少有一个输入元素没有ID。由于您无法在toString上致电null，因此会收到错误。

您实际上并不需要首先致电toString()。只需按原样使用campo即可。它将为null（如果没有ID）或字符串。

Answer 2

这部分代码引起了我的好奇心：

var x=document.getElementById("frm1");
for (var i=0;i<x.length;i++){
    var input=document.getElementsByTagName("input")[i];

这会在您的网页上收集所有 <input>元素，并且每次都会i一个; ;谁知道你可能得到什么输入元素。

如果您只想遍历您感兴趣的表单元素，这会更容易，更快：

var x = document.getElementById('frm1'),
input,
campo;

for (var i = 0, n = x.length; i != n; ++i) {
    input = x.elements[i];
    if (campo = input.id) {
        // rest of your code
    }
}

如您所见，我使用id属性而不是id属性;这通常是一件好事，因为属性的变化可能并不总是反映在相应的属性中。

此外，.toString()是多余的，如果不是null，它已经是一个字符串。

<强>更新

正如@bfavaretto在评论部分指出的那样，这部分代码也可以简化：

if(document.getElementById(id).value==""){

到此：

if (input.value == '') {

无论输入元素是否具有id

，这都会有效

未捕获的TypeError：无法调用null的方法'toString'

2 个答案: