如何使用javascript验证表单字段？

Noob，尝试创建一个简单的表单，并在同一个表单上验证输入。然而，我不知道如何正确选择js中的每个输入，所以什么都没有发生。我只是在学习html、bootstrap和javascript，所以更简单（pythonic）的答案比更复杂的答案更受欢迎

我已经阅读了文档，以及其他一些关于这个主题的stackoverflow帖子，如果我不是Noob的话，这些帖子可能会回答我的问题

<div class="form-group"> 
        <label for="first_name">First Name</label>
        <input autocomplete="off" autofocus="" class="form-control" name="first_name" placeholder="First Name" type="text">
        <small id="first_name_Help" class="form-text text-muted">* First Name is Mandatory.</small>
    </div>

    <div class="form-group"> 
        <label for="last_name">Last Name</label>
        <input autocomplete="off" autofocus="" class="form-control" name="last_name" placeholder="Last Name" type="text">
        <small id="last_name_Help" class="form-text text-muted">* Last Name is Mandatory.</small>
    </div>

    <p>Select Your Country of Residence Below</p>

    <div class="form-group">
        <select name="country">

            <option disabled selected value="">Country</option>
            <option value="Canada">Canada</option></option>
            <option value="USA">USA</option></option>
            <option value="Mexico">Mexico</option>
            <option value="None of the Above">None of the Above</option>
        </select>
    </div>

    <script>

    document.querySelector('form').onsubmit = function() {
        if (!document.querySelector('input.first_name').value) {
            alert('You must provide your name!');
            return false;
        }

名字
*名字是必须的。
姓
*姓是必须的。
在下面选择您的居住国

国家
加拿大
美国
墨西哥
以上都没有
document.querySelector（'form'）。onsubmit=function（）{
if（！document.querySelector（'input.first_name'）。值）{
警报（'您必须提供您的姓名！'）；
返回false；
}

您的选择器错误：

document.querySelector('input.first_name').value

您正在选择一个具有“first_name”类的

input

元素。您的输入类名是“form control”，并且它不是唯一的（这很好）。您必须使用它们的

name

属性进行选择。如下所示：

document.querySelector('input[name=first_name]').value

---

您可以使用Javascript验证表单，也可以使用。在下面的snippet中，我使用“required”关键字强制输入字段

输入：无效{
边框：纯红；
}
输入：有效{
边框：纯绿色；
}

名字
*名字是必须的。
姓
*姓是必须的。
在下面选择您的居住国

国家
加拿大
美国
墨西哥
以上都没有
提交

别担心，您的代码看起来不错，只是js中有一点问题，

document.querySelector（'input.first\u name'））

点

用于类，就像在css中一样，hashtags

#

用于id。

first\u name

不是类也不是id，它是name属性中的一个值。有关更多参考，请阅读