1

我想知道是否有一种方法可以在不使用警报的情况下验证表单。像通常一样，如果您输入了错误的信息或其他内容，您会在输入框旁边看到红色文本。而且我不想使用 Jquery。我在 html 中包含了红色文本消息的 div - namemsg、commentmsg、emailmsg。

到目前为止，我只得到了带有警报的代码。JavaScript：

function validateUser()
{
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
        alert("Not a valid e-mail address");
        return false;
    }

    {
        alert("Valid Input");
    }

    return true;
}

html

 <form name="myForm" method="post">
    <label>*Name:</label>
    <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/>
    <div id="namemsg"></div><br/>

    <label>*E-mail:</label>
    <input type="text" name="email" title="Enter a valid email address" placeholder="me@example.com" onclick="select()" required/>
    <div id="emailmsg">  </div><br/>

    <label>*Comment:</label>
    <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea>
    <div id="commentmsg">  </div>
    <label id="error"> </label> <br/>
    <input type="submit" value="Submit" onclick="return validateUser()"> 
</form>
4

5 回答 5

6

您可以在经过验证的字段旁边放置一个跨度/标签，其中包含预定义的文本和样式以及none. 如果验证检测到无效输入 - 将显示样式更改为 "" 以使标签可见。

更新

我确实看到您已经预定义了 DIV。将其定义为

<div id="emailmsg" style="color:Red;display:none">Not a valid e-mail address</div>

而在 JavaScript 中，而不是

alert("Not a valid e-mail address");

采用

document.getElementById("emailmsg").style.display=""
于 2013-05-16T13:40:42.547 回答
1

您可以将该文本框边框着色为红色并在其下方显示错误，而不是显示警报消息框。就像，如果您替换以下代码行：

alert("Not a valid e-mail address");

和：

document.forms["myForm"]["email"].style.border = "1px solid red";
document.getElementById("emailmsg").innerHTML = "Not a valid e-mail address";

上面的代码将用红色突出显示电子邮件字段的边框，并在 emailmsg div 中显示错误。

希望这能有所帮助。

于 2013-05-16T13:44:53.587 回答
0

你的html：

    <form name="myForm" method="post">
        <label>*Name:</label>
        <input type="text" name="name" title="Enter a your name" placeholder="Your Name" onclick="select()" required/>
        <div id="namemsg"></div><br/>

        <label>*E-mail:</label>
        <input type="text" name="email" title="Enter a valid email address" placeholder="me@example.com" onclick="select()" required/>
// this span is hidden until you show it as error msg
    <span id="error" style='display: none'>Not a valid e-mail address<span>
        <div id="emailmsg">  </div><br/>

        <label>*Comment:</label>
        <textarea name="comment" title="Enter your comments" placeholder="Enter your comments." onclick="select()" required/></textarea>
        <div id="commentmsg">  </div>
        <label id="error"> </label> <br/>
        <input type="submit" value="Submit" onclick="return validateUser()"> 
    </form>

你的js：

    function validateUser()
    {{
    var x=document.forms["myForm"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
//instead of alerting error show your error span try to put nice css for it
    document.getElementById('error').style.display="block";
    return false;
    }

    {alert("Valid Input");}
    return true;
        }
于 2013-05-16T13:42:23.740 回答
0

首先，我建议将函数的执行附加到 event OnSubmit。

HTML：

<form method="post" name="myForm" onsubmit="return validateUser(this);">

JS：

function validateUser(formObj) {}

接下来，您唯一需要做的就是拥有某种容器，如果函数检测到错误，只需将错误文本附加到它上面。

在每个函数调用开始时，清空容器。

如果您希望错误出现在文本框/任何输入标记旁边，只需在每个字段旁边添加div/span并将错误附加到它。

document.getElementById("emailmsg").innerHTML = "Not cool...";

于 2013-05-16T13:43:43.527 回答
0

这应该会有所帮助。

if (atpos<2 || dotpos<atpos+2 || dotpos+2>=x.length){
// validate message function call
valMessage('emailmsg', 'Not a valid e-mail address');
return false;
}

// validate message function 
function valMessage(divName, content) {
     document.getElementById(divName).innerHTML = content;
}
于 2013-05-16T13:53:08.150 回答