使用javascript验证表单

我正在尝试使用外部JS文件验证我的表单，我想将“您的姓名”、“您的电子邮件”和“是否新页面”作为必填字段，不能留空，我一直在使用不同的JavaScript函数，但似乎无法使其正常工作，我觉得这可能是我犯的一个简单的错误，但似乎就是想不出来。如果有人能看一看，看看他们是否能发现我的错误，我将不胜感激。谢谢 这是我的表格：

        <form method="post" action="#">
            <h3 class="formHeader">Form Header</h3>
            <div class="formPod">
                <fieldset role="presentation">
                    <div class="formRow clearfix">
                        <span><label for="customerName">Your Name</label></span>
                        <input name="customerName" id="customerName" type="text" size="60" maxlength="200" />
                    </div>
                    <div class="formRow clearfix">
                        <span><label for="customerEmail">Your Email</label></span>
                        <input name="customerEmail" id="customerEmail" type="text" size="60" maxlength="200" />
                    </div>
                    <div class="formRow clearfix">
                        <fieldset>
                            <legend>Is the new page</legend>
                            <div>
                                <input type="radio" name="radio" id="radioEasier" value="easier" />
                                <span><label for="radioEasier">Easier to use</label></span>
                            </div>
                            <div>
                                <input type="radio" name="radio" id="radioHarder" value="harder" />
                                <span><label for="radioHarder">Harder to use</label></span>
                            </div>
                            <div>
                                <input type="radio" name="radio" id="radioSame" value="same" />
                                <span><label for="radioSame">About the same</label></span>
                            </div>
                        </fieldset>
                    </div>
                    <div class="formRow clearfix">
                        <span>
                            <label for="comments">Comments</label>
                            <label for="comments" id="charsLeft">(300)</label>
                        </span>
                        <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
                    </div>
                </fieldset>
                <div class="actionRow clearfix">
                    <div class="btn">
                        <input type="submit" value="Submit" />
                    </div>
                </div>
            </div>
        </form>

表格标题
你的名字
你的电子邮件
这是新的一页
易于使用
更难使用
差不多
评论
(300)

下面是我一直在使用的外部JavaScript文件，以尝试让验证工作，从customerName开始

<script type="text/javascript">

function checkForBlank(){
    if (document.getElementById('customerName').value ==""){
        alert('Please enter a name');
        return false:
    }



}

</script>

函数checkForBlank（）{
if（document.getElementById（'customerName'）。值==“”）{
警报（“请输入名称”）；
返回false：
}
}

---

谢谢。

你考虑使用HTML属性吗？在输入字段中，您可以设置

required

atribute，字段表单在填写完毕后才能发送。另一个选项是在标记上使用patter属性，并使用regex测试验证

---

---

看看你的代码，在js上，你需要采取一种方式，在“false”之后加上“：”并将其替换为“；”

此外，在标记中，您从未调用表单submit上的函数，这就是为什么您从未运行该函数。试试这个：

HTML

<form method="post" action="#">
    <h3 class="formHeader">Form Header</h3>
    <div class="formPod">
        <fieldset role="presentation">
            <div class="formRow clearfix">
                <span><label for="customerName">Your Name</label></span>
                <input name="customerName" id="customerName" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <span><label for="customerEmail">Your Email</label></span>
                <input name="customerEmail" id="customerEmail" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <fieldset>
                    <legend>Is the new page</legend>
                    <div>
                        <input type="radio" name="radio" id="radioEasier" value="easier" />
                        <span><label for="radioEasier">Easier to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioHarder" value="harder" />
                        <span><label for="radioHarder">Harder to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioSame" value="same" />
                        <span><label for="radioSame">About the same</label></span>
                    </div>
                </fieldset>
            </div>
            <div class="formRow clearfix">
                <span>
                    <label for="comments">Comments</label>
                    <label for="comments" id="charsLeft">(300)</label>
                </span>
                <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
            </div>
        </fieldset>
        <div class="actionRow clearfix">
            <div class="btn">
                <input type="submit" value="Submit" onclick="checkForBlank();" />
            </div>
        </div>
    </div>

表格标题
你的名字
你的电子邮件
这是新的一页
易于使用
更难使用
差不多
评论
(300)

---

js

<script type="text/javascript">
    function checkForBlank(){
        if (document.getElementById('customerName').value === ""){
            alert('Please enter a name');
            return false;
        }
    }
</script>

函数checkForBlank（）{
if（document.getElementById（'customerName'）。值=“”）{
警报（“请输入名称”）；
返回false；
}
}
<代码> > p>你考虑使用HTML属性吗？在输入字段中，您可以设置
required
atribute，字段表单在填写完毕后才能发送。另一个选项是在标记上使用patter属性，并使用regex测试验证




看看你的代码，在js上，你需要采取一种方式，在“false”之后加上“：”并将其替换为“；”

此外，在标记中，您从未调用表单submit上的函数，这就是为什么您从未运行该函数。试试这个：

HTML

<form method="post" action="#">
    <h3 class="formHeader">Form Header</h3>
    <div class="formPod">
        <fieldset role="presentation">
            <div class="formRow clearfix">
                <span><label for="customerName">Your Name</label></span>
                <input name="customerName" id="customerName" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <span><label for="customerEmail">Your Email</label></span>
                <input name="customerEmail" id="customerEmail" type="text" size="60" maxlength="200" />
            </div>
            <div class="formRow clearfix">
                <fieldset>
                    <legend>Is the new page</legend>
                    <div>
                        <input type="radio" name="radio" id="radioEasier" value="easier" />
                        <span><label for="radioEasier">Easier to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioHarder" value="harder" />
                        <span><label for="radioHarder">Harder to use</label></span>
                    </div>
                    <div>
                        <input type="radio" name="radio" id="radioSame" value="same" />
                        <span><label for="radioSame">About the same</label></span>
                    </div>
                </fieldset>
            </div>
            <div class="formRow clearfix">
                <span>
                    <label for="comments">Comments</label>
                    <label for="comments" id="charsLeft">(300)</label>
                </span>
                <textarea name="comments" id="comments" rows="4" cols="40"></textarea>
            </div>
        </fieldset>
        <div class="actionRow clearfix">
            <div class="btn">
                <input type="submit" value="Submit" onclick="checkForBlank();" />
            </div>
        </div>
    </div>


表格标题
你的名字
你的电子邮件
这是新的一页
易于使用
更难使用
差不多
评论
(300)


js

<script type="text/javascript">
    function checkForBlank(){
        if (document.getElementById('customerName').value === ""){
            alert('Please enter a name');
            return false;
        }
    }
</script>


函数checkForBlank（）{
if（document.getElementById（'customerName'）。值=“”）{
警报（“请输入名称”）；
返回false；
}
}
我会研究不同的方法，但需要使用JS来完成。没问题，祝冒险好运，并将其视为一种挑战，你会有所收获；），完成此操作后，请查看所需的属性，以备将来参考：）我会研究不同的方法，但需要使用JSN完成。没问题，祝您在冒险中好运，并将其视为一项挑战，您将获得成功；），完成此操作后，请查看所需的属性，以备将来参考：）