我的表单验证功能有什么问题

What is wrong with my form validation function?

本文关键字:什么 问题 功能 表单 验证 我的      更新时间:2023-09-26

我有一个简单的表单,要求输入姓名,电子邮件,电话号码,年龄和收入。当我点击提交时,validateForm函数应该检查错误,如果有任何错误,文本框将是红色的,并且表单下将显示红色的错误消息。这个功能似乎不工作,我不知道为什么。这是我的表格和脚本。我尝试将提交按钮设置为有一个onclick事件来调用该函数,但这也不起作用。

<script>
function validateForm() {

    if (document.forms.formValidation.Name.value == "") {
        document.getElementById("error").style.display = "inline";
        document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
        return false;
    }
    if (document.forms.formValidation.email.value == "") {
        document.getElementById("error").style.display = "inline";
        document.forms.formValidation.email.style.backgroundColor = "red";
    }
    var phoneNo = /^'d{10}$/;
    if (document.forms.formValidation.number.value.match(phoneNo)) {
        return true;
    }
    else {
        document.getElementById("error").style.display = "inline";
        document.forms.formValidation.number.style.backgroundColor = "red";
        return false;
    }
    var emailVal = document.formValidation.email.value;
    ampersandPos = emailVal.indexOf("@");
    dotPos = emailVal.lastIndexOf(".");
    if (amersandPos < 1 || (dotPos - amersandPos < 2)) {
        alert("Please enter a valid email address.");
        document.getElementById("error").style.display = "inline";
        return false;
    }
    return true;
    var len = age.length;
    for (var i = 0; i < len; i++) {
        if (document.forms.formValidation.age[i].checked)
        {
            return true;
        }
        else {
            document.getElementById("error").style.display = "inline";
            return false;
        }
    }


}
</script>
<form name="formValidation" onsubmit="return validateForm()">
                    <table cellspacing="2" cellpadding="2" border="1">
                        <tr>
                            <td align="right">First and Last Name: </td>
                            <td align="left"><input type="text" id="name" name="Name" ></td>
                        </tr>
                        <tr>
                            <td align="right">Email: </td>
                            <td align="left"><input type="text" id="email" name="email" ></td>
                        </tr>
                        <tr>
                            <td align="right">Phone Number: </td>
                            <td align="left"><input type="text" name="number" /></td>
                        </tr>
                        <tr>
                            <td align="right">Age:</td>
                            <td class="rad"><input type="radio" name="age" value="minor">Under 18</td>
                            <td class="rad"><input type="radio" name="age" value="adult">18-64</td>
                            <td class="rad"><input type="radio" name="age" value="senior">65+</td>
                        </tr>
                        <tr>
                            <td align="right">Income:</td>
                            <td>
                                <select>
                                    <option value="underFifty">Under $50,000</option>
                                    <option value="fiftyToHundred">$50,000 - $100,000</option>
                                    <option value="overHundred">Over $100,000</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                    <input type="submit" value="Submit">                
                    </form>
                    <div id="error">
                        <p>Required fields are missing!</p>
                    </div>

这行少了一个右括号:

if (amersandPos < 1 || (dotPos - amersandPos < 2)

同样,这一行也是无效的:

document.formValidation.email.style.background-color = "red";

因为background-color不是一个有效的标识符名称。

这里有一个摆弄这些和一个问题在评论修复:https://jsfiddle.net/0zyv3g98/

你的js有错误。你不能使用document。formvalidation。name之类的。正确的语法是' document.forms.formValidation '。改正你所有的代码,它会工作的。

      if (document.forms.formValidation.Name.value == "") {
        document.forms.formValidation.getElementById("error").style.display = "inline";
        document.forms.formValidation.getElementById("name").style.backgroundColor = "red";
        //return false;
    }
    if (document.forms.formValidation.email.value == "") {
        document.forms.formValidation.getElementById("error").style.display = "inline";
        document.forms.formValidation.email.style.backgroundColor = "red";
    }
    var emailVal = document.forms.formValidation.email.value;
    ampersandPos = emailVal.indexOf("@");
    dotPos = emailVal.lastIndexOf(".");
    if (amersandPos < 1 || (dotPos - amersandPos < 2)
    {
        alert("Please enter a valid email address.");
        document.forms.formValidation.getElementById("error").style.display = "inline";
        return false;
    }
    return true;