Question

我正在尝试学习表单验证，但它无法正常工作。

// birthyear must be between 1900 and 2012. turn the birth year textbox color to yellow
        window.onload = function() {
        document.forms[0].onsubmit = function() {
        for(i = 0; i < document.forms[0].elements.length; i++){

       var x =
       document.forms[birthyear].value

    if (x != (>1900 &&<=2012)){
    alert("Must be between 1900 and 2012");
    x.this.style.color ="yellow";
    return false;

//这就是我创建表单的方式：

<form action = "fake.php"></br>

    Username  
   <input class ="required"type = "text" name = "username" id ="username" /><br>
   Username
   <input class = "required"type = "text" name ="username"id ="username"/>   <br>


Birthyear
<input class  = "required" type = "number" name = "birthyear" id= "birthyear"/>

<input type = "submit"/>
</form>

Answer 1

if(x<1900 || x> 2012){
    alert("invalid year");

使用if语句并尝试

并检查变量x，如果它正在使用用户输入的值正确。只需对x变量发出警报并首先确认

Answer 2

您的if语句条件x != (>1900 &&<=2012)没有意义。 >1900和<=2012不评估为布尔值，因此您无法在其上使用&&运算符。你想要的是这样的：

x<1900 || x>2012

检查x是否过低或过高，然后使用||（或）运算符检查x是否无效。

Answer 3

您的代码存在一些语法问题。如果你想获得birthyear输入的价值。您不必迭代表单中的元素（就像使用for循环一样），您可以这样做： document.forms[0].elements['birthyear']

当你得到input元素的值时，它的类型是string。在将它与具有整数类型的值进行比较之前，您应该将字符串转换为整数：

intValue = parseInt(stringValue, 10);

所以你的代码将会跟随

<form action="fake.php">Username
    <input class="required" type="text" name="username" id="username" />Birthyear
    <input class="required" type="number" name="birthyear" id="birthyear" />
    <input type="submit" />
</form>

<script>
// birthyear must be between 1900 and 2012. turn the birth year textbox color to yellow
window.onload = function () {
    document.forms[0].onsubmit = function () {

        var birthYearElem = document.forms[0].elements['birthyear'],
            stringValue = birthYearElem.value,
            intValue = parseInt(stringValue, 10);

        if (intValue < 1900 || intValue > 2012) {
            alert("Must be between 1900 and 2012");
            birthYearElem.style.color = "yellow";
            return false;
        }
    }
}
<script>

我想知道如何在javascript中进行表单验证

3 个答案: