Question

我正在尝试学习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个没有数据的错误：3个存在检查，1个用于正则表达式，1个用于isNaN）

因此，我的问题是为什么我仍然会收到错误，为什么我没有输出。

非常感谢任何帮助。

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

Answer 1

你的正则表达式错了。您有/\s+@\s+.\s+/，它应该是/\w+@\w+\.\w+/。你没有逃脱点，\s匹配空格，而不是字符串。 \w匹配单词。对于正确的电子邮件正则表达式，您需要的远不止这些，但对于您的简单工作，这就足够了。第二个正则表达式应为/\w+/。

Javascript和HTML表单验证检查

1 个答案: