0

我正在尝试学习 html 和 javascript。我创建了一个 html 表单并使用 javascript 来验证字段。我对年龄字段进行了 isNaN 检查,对 emial 进行了正则表达式检查,并对所有字段进行了存在检查。我目前正在将表单输出到地址栏,但这不起作用,因为我遇到了错误。

<title> </title>
<script type="text/javascript">

    function validate()
    {
        var errors = 0;
        if (isNumeric(document.getElementById("age").value) == false)
        {
            errors++;
        }
        if (emailCheck(document.getElementById("email").value) == false)
        {
            errors++;
        }
        var inputBoxes = document.getElementsByTagName('input');
        for(var i= 0; i < inputBoxes.length; i++)
        {
            if(inputBoxes[i].type != 'text') continue;
            if(presenceCheck(inputBoxes[i].value) == false)
            {
                errors++;

            }
        }
        console.log(errors);
        if(errors == 0)
        {
        window.location.assign("output.html#" + "%%" + "name" + "%%" + 
        document.getElementById("name").value + "%%" + "email" + "%%" +
        document.getElementById("email").value + "%%" + "age" + "%%" +
        document.getElementById("age").value + "%%" + "comments" + "%%" + 
        document.getElementById("comments").value);
        }
    }
    function isNumeric(number)
    {
        return !isNaN(number) && number != null && number != "";
    }
    function emailCheck(email)
    {
        var emailRegex = /\s+@\s+.\s+/;
        return emailRegex.test(email);
    }
    function presenceCheck(data)
    {
        var regex = /\s+/;
        return regex.test(data);
    }

</script> 

以下是目前仅包含在正文标签中的表格

<form id="frmA" name="frmA">
    <label name="frmName">Name:</label><br />
    <input form="frmA" type="text" name="frmName" id="name"/><br />
    <label name="frmEmail">E-Mail:</label><br />
    <input form="frmA" type="text" name="frmEmail" id="email"/><br />
    <label name="age">Age:</label><br />
    <input form="frmA" name="frmAge" id="age"/><br />
    <label name="frmComments">Comments:</label><br />
    <textarea form="frmA" cols="50" rows="10" id="comments"></textarea><br />
</form>
    <button onClick="validate();">Submit</button>

我知道当没有数据存在时检查工作,但是当我在表单中输入数据并点击提交时,我仍然面临 4 个错误。(有 5 个没有数据的错误:3x 存在检查,1 个用于正则表达式,一个用于 isNaN)

因此,我的问题是为什么我仍然收到错误以及为什么我没有得到输出。

任何帮助将不胜感激。

额外:我还希望输入字段在出现错误时更改颜色。

4

1 回答 1

0

你的正则表达式是错误的。你有/\s+@\s+.\s+/而且应该是/\w+@\w+\.\w+/。您没有转义点并\s匹配空格,而不是字符串。\w匹配单词。对于正确的电子邮件正则表达式,您需要的远不止这些,但要让您的简单案例起作用,这就足够了。第二个正则表达式应该是/\w+/.

于 2013-10-22T17:49:52.043 回答