javascript - 使用 JavaScript 验证表单

Question

我正在尝试使用外部 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>

这是我一直在使用的外部 JavaScript 文件，以尝试从 customerName 开始进行验证。

<script type="text/javascript">

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



}

</script>

谢谢。

Answer 1

您考虑使用 HTML 属性吗？在输入字段上，您可以设置 required 属性，并且字段表单在填写后才能发送。另一种选择是在标记上使用 patter 属性并使用正则表达式来测试验证

<小时/>

http://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_input_pattern.asp

<小时/>

看你的代码，在js上，需要把“false”后面的“:”换成“;”

同样在标记中，您从未在表单提交上调用该函数，这就是您从未运行该函数的原因。试试这个:

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>

<小时/>

js

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