Question

我正在研究一个关于Web开发的MOOC课程的简单表格。我在JS中使用RegEx来测试有效输入，并使用onblur效果来显示我的测试＆＃39;输出。由于一些奇怪的原因，它不起作用。这是代码，我将解释它的作用：

<!DOCTYPE HTML>
<html>
<head>
    <title>Week 5 Assignment - Simple Form</title>
    <script type="text/javascript" src="Week5.js"></script>
</head>
<body> <!--The Five Input Elements here are as follows
           1. Text Box
           2. Text Box
           3. Radio Buttons
           4. Date
           5. Button-->
    <form>
        First Name:<br />
        <input type="text" name="firstname" onblur="testFirstName(); "/><span id="firstNamePrompt">&nbsp;</span><br /><br />
        Last Name:<br />
        <input type="text" name="lastname" onblur="testLastName(); "/><span id="lastNamePrompt"></span>&nbsp;<br /><br />
        Gender:<br />
        <input type="radio" name="gender" value="male" />Male<br />
        <input type="radio" name="gender" value="female" />Female<br /><br />
        Date and Year of Birth:<br />
        <input type="date" name="dob" /><br /><br />
        <input type="button" value="Submit" />

    </form>
</body>
</html>

在这里，我创建了一个简单的表单，onblur事件由2个javascript函数testFirstName()和testLastName()触发。我希望输出与文本框在同一行上输出，该文本框表明条件已经满足或未满足。

这是JavaScript：

function testFirstName() {
    var firstName = document.getElementById('firstname').value;
    var regCheck = /^[a-zA-Z\s\'\-] {2,15} $/;

    if (regCheck.test(firstname)) {
        document.getElementById('firstNamePrompt').style.color = "green";
        document.getElementById('firstnamePrompt').innerHTML = "<strong>Name Accepted!</strong>";
        return true;
    }

    else {
        document.getElementById('firstNamePrompt').style.color = "red";
        document.getElementById('firstNamePrompt').innerHTML = "<strong>Name must be between 2-15 characters!</strong>";
        return false;
    }
}

function testLastName() {
    var firstName = document.getElementById('lastname').value;
    var regCheck = /^[a-zA-Z\s\'\-] {2,25} $/;

    if (regCheck.test(firstname)) {
        document.getElementById('lastNamePrompt').style.color = "green";
        document.getElementById('lastnamePrompt').innerHTML = "<strong>Name Accepted!</strong>";
        return true;
    }

    else {
        document.getElementById('lastNamePrompt').style.color = "red";
        document.getElementById('lastNamePrompt').innerHTML = "<strong>Name must be between 2-25 characters!</strong>";
        return false;
    }
}

我有一个注册。测试该字符只能是A-Z（大写和小写），通过's'获得空格，或者名称中包含撇号或短划线的表达式。这些是基于正则表达式的唯一允许的字符。我不确定为什么我看不到文字"Name Accepted!"或"Name must be between x & y characters"。如果还有什么我需要解释的，请告诉我。我希望这不是冗长的。

Answer 1

元素需要id才能从javascript document.getElementById()定位。

将id添加到firstname和lastname后，一切正常。

此外，您的范围ids包含大写字母，您在javascript中未提及。

以下是更正的代码：（运行代码段）

function testFirstName() {
    var firstName = document.getElementById('firstname').value;
    var regCheck = /^[a-zA-Z\s\'\-]{2,25}$/;

    if (regCheck.test(firstName)) {
        document.getElementById('firstNamePrompt').style.color = "green";
        document.getElementById('firstNamePrompt').innerHTML = "<strong>Name Accepted!</strong>";
        return true;
    }

    else {
        document.getElementById('firstNamePrompt').style.color = "red";
        document.getElementById('firstNamePrompt').innerHTML = "<strong>Name must be between 2-15 characters!</strong>";
        return false;
    }
}

function testLastName() {
    var lastName = document.getElementById('lastname').value;
    var regCheck = /^[a-zA-Z\s\'\-]{2,25}$/;

    if (regCheck.test(lastName)) {
        document.getElementById('lastNamePrompt').style.color = "green";
        document.getElementById('lastNamePrompt').innerHTML = "<strong>Name Accepted!</strong>";
        return true;
    }

    else {
        document.getElementById('lastNamePrompt').style.color = "red";
        document.getElementById('lastNamePrompt').innerHTML = "<strong>Name must be between 2-25 characters!</strong>";
        return false;
    }
}

<!DOCTYPE HTML>
<html>
<head>
    <title>Week 5 Assignment - Simple Form</title>
    <script type="text/javascript" src="Week5.js"></script>
</head>
<body> <!--The Five Input Elements here are as follows
           1. Text Box
           2. Text Box
           3. Radio Buttons
           4. Date
           5. Button-->
    <form>
        First Name:<br />
        <input type="text" id="firstname" name="firstname" onblur="testFirstName(); "/><span id="firstNamePrompt">&nbsp;</span><br /><br />
        Last Name:<br />
        <input type="text" id="lastname" name="lastname" onblur="testLastName(); "/><span id="lastNamePrompt"></span>&nbsp;<br /><br />
        Gender:<br />
        <input type="radio" name="gender" value="male" />Male<br />
        <input type="radio" name="gender" value="female" />Female<br /><br />
        Date and Year of Birth:<br />
        <input type="date" name="dob" /><br /><br />
        <input type="button" value="Submit" />

    </form>
</body>
</html>

Answer 2

为了使用getElementById方法，您应该为输入提供id属性：

<input type="text" id="firstname" name="firstname" onblur="testFirstName(); "/>

和

<input type="text" id="lastname" name="lastname" onblur="testLastName(); "/>

无法从span标记

2 个答案: