Question

问题是，userid被抓得很好，但是第二个元素“passwordfield”和剩下的所有元素ALWAYS都返回null。我已经尝试了所有方法来获取这个元素值，但它们总是返回一个null对象，然后当我尝试访问null的值时，我的代码抛出并出错。

这是我的脚本。

function formValidation() {
    var uid = document.registration.userid.value;
    document.write("<h1>" + uid + "</h1>");
    try {
        var passid = document.registration.passwordfield.value;
        document.write("<h1>" + passid.value + "</h1>");
    } catch (error) {
        alert(error);
    }
    var uname = document.getElementById("username");
    document.write("<h1>" + uname + "</h1>");
    var uadd = document.getElementById("address");
    document.write("<h1>" + uadd + "</h1>");
    var ucountry = document.getElementById("country");
    document.write("<h1>" + uncountry + "</h1>");
    var uzip = document.getElementById("zip");
    document.write("<h1>" + uzip + "</h1>");
    var uemail = document.getElementById("email");
    document.write("<h1>" + uemail + "</h1>"); 

    {
        if (passid_validation(passid, 7, 12)) {
            if (allLetter(uname)) {
                if (alphanumeric(uadd)) {
                    if (countryselect(ucountry)) {
                        if (allnumeric(uzip)) {
                            if (ValidateEmail(uemail)) {
                                if (validsex(umsex, ufsex)) {}
                            }
                        }
                    }
                }
            }
        }
    }
    return false;
}

function userid_validation(uid, mx, my) {
    var uid_len = uid.value.length;
    if (uid_len == 0 || uid_len >= my || uid_len < mx) {
        alert("User Id should not be empty / length be between " + mx + " to " + my);
        uid.focus();
        return false;
    }
    return true;
}

function passid_validation(passid, mx, my) {
    var passid_len = passid.value.length;
    if (passid_len == 0 || passid_len >= my || passid_len < mx) {
        alert("Password should not be empty / length be between " + mx + " to " + my);
        passid.focus();
        return false;
    }
    return true;
}

function allLetter(uname) {
    var letters = /^[A-Za-z]+$/;
    if (uname.value.match(letters)) {
        return true;
    } else {
        alert('Username must have alphabet characters only');
        uname.focus();
        return false;
    }
}

function alphanumeric(uadd) {
    var letters = /^[0-9a-zA-Z]+$/;
    if (uadd.value.match(letters)) {
        return true;
    } else {
        alert('User address must have alphanumeric characters only');
        uadd.focus();
        return false;
    }
}

function countryselect(ucountry) {
    if (ucountry.value == "Default") {
        alert('Select your country from the list');
        ucountry.focus();
        return false;
    } else {
        return true;
    }
}

function allnumeric(uzip) {
    var numbers = /^[0-9]+$/;
    if (uzip.value.match(numbers)) {
        return true;
    } else {
        alert('ZIP code must have numeric characters only');
        uzip.focus();
        return false;
    }
}

function ValidateEmail(uemail) {
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (uemail.value.match(mailformat)) {
        return true;
    } else {
        alert("You have entered an invalid email address!");
        uemail.focus();
        return false;
    }
}

function validsex(umsex, ufsex) {
    x = 0;
    if (umsex.checked) {
        x++;
    }
    if (ufsex.checked) {
        x++;
    }
    if (x == 0) {
        alert('Select Male/Female');
        umsex.focus();
        return false;
    } else {
        alert('Form Successfully Submitted');
        window.location.reload()
        return true;
    }
}

这是我的HTML。

<!DOCTYPE html>
<html>
<head>

<title>form</title>

<script src="hai.js" type="text/javascript" ></script>
</head>

<body>
<h1>Registration Form</h1>
<p>Use tab keys to move from one input field to the next.</p>
<form name="registration" onSubmit="return formValidation();" action="hai.js"  METHOD="POST">
    User id:
    <input type="text" name="userid" size="12" /><br>
    Password:
    <input type="password" name="passwordfield" size="12" /><br>
    Name:
    <input type="text" name="username" size="50" /><br>
    Address:
    <input type="text" name="address" size="50" /><br>
    Country:
    <select name="country">
    <option selected="" value="Default">(Please select a country)</option>
    <option value="AF">Australia</option>
    <option value="AL">Canada</option>
    <option value="DZ">India</option>
    <option value="AS">Russia</option>
    <option value="AD">USA</option>
    </select><br>
    ZIP
    <input type="text" name="zip" /><br>
    Email:
    <input type="text" name="email" size="50" /><br>
    Sex:
    <input type="radio" name="sex" value="Male" /><span>Male</span><br>
    <input type="radio" name="sex" value="Female" /><span>Female</span><br>
    Language
    <input type="checkbox" name="en" value="en" checked /><span>English</span><br>
    <input type="checkbox" name="nonen" value="noen" /><span>Non English</span><br>
    About:<br>
    <textarea name="desc" id="desc"></textarea><br>
    <input type="submit" name="submit" value="Submit" />
</form>

</body>
</html>

Answer 1

问题可能在于document.write，就好像它在页面加载后运行它会覆盖你的页面，然后你当然不能再访问这些元素了。

另外，为什么使用document.registration.userid而不使用document.registration.username？根据您的浏览器，getElementById可能不适用于名称属性。

Answer 2

问题是密码字段之前的document.write（）..由于某种原因，调用它会从文档中删除注册变量... 我不太清楚为什么......

但我尝试将其删除“document.write”并以推荐的方式添加节点：

var myElement = document.createElement("h1");
myElement.appendChild(document.createTextNode("My Text here"));
document.appendChild(myElement);

它工作得很好...... 你应该读这个：http://ejohn.org/blog/dom-documentfragments/ 我想它可能对你有所帮助:)）

无法使用javascript访问第二个表单元素

2 个答案: