javascript - 表单验证

Question

JS:

validate document.forms();

if (document.forms[0].userAge.value == "") {
    alert("Age field cannot be empty.");
     return false;
}


if (document.forms[0].userAge.value < 5) {
  alert("Your age input is not correct.");
  return false;
}


if (userage == isNumber) {
  alert("Your age input is not correct.");
  return false;
}

alert("Name and Age are valid.");
return true;

HTML:

     <label for="userAge">Age:</label>

    <input type="text" name="userAge" id="userAge" />

 </div>

如果这是我的代码，我该怎么做，如果有人在年龄文本框中输入一个非数字，就会出现警告“您的输入不正确”？

Answer 1

编辑:我最初建议使用 parseInt 和 isNaN() 来测试输入是否为非数字。好吧，似乎使用正则表达式更可取，不仅可以正确格式化像“4a”这样的案例，而且在很多情况下它实际上更快(惊喜!)。

我用一个按钮模拟了一些 HTML 来说明。

HTML:

<form>
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge" />
    <input type="button" id="test" name="test" value="Test" />
</form>

JavaScript:

function validateForm() {

    // get the input value once and use a variable
    // this makes the rest of the code more readable
    // and has a small performance benefit in retrieving
    // the input value once
    var userAge = document.forms[0].userAge.value;

    // is it blank?
    if (userAge === "") {
        alert("Age field cannot be empty.")
        return false;
    }

    // is it a valid number? testing for positive integers
    if (!userAge.match(/^\d+$/)) {
        alert("Your age input is not correct.")
        return false;
    }

    // you could also test parseInt(userAge, 10) < 5
    if (userAge < 5) {
        alert("Your age input is not correct.")
        return false;
    }

    alert("Name and Age are valid.");
    return true;
}

// trigger validateForm() however you want, I did this as an example
document.getElementById("test").onclick = validateForm;

这里有一个 jsFiddle 来演示:http://jsfiddle.net/willslab/m2spX/6/

关于正则表达式:如果 userAge 仅包含正整数，则 userAge.match(/^\d+$/) 返回 true。开头/和结尾/表示正则表达式文字。\d 仅表示 ASCII 数字。 + 匹配前一个模式的一次或多次出现(在本例中为数字)。 ^表示从头开始匹配，$表示匹配到结束。所以/^\d+$/是一个从头到尾只匹配 ASCII 数字的正则表达式!

另请注意，您可以使用 OR 运算符 (||) 组合最后两个 if 语句。我将它们分开，以防您想给每个人一个独特的验证消息。

看起来像这样:

if (!userAge.match(/^\d+$/) || userAge < 5) {
    alert("Your age input is not correct.")
    return false;
}

请随时提出有关代码的任何问题，我会进行解释。希望对您有所帮助!