javascript - 没有警报的表单验证

Question

我想知道是否有一种方法可以在不使用警报的情况下验证表单。通常，如果您输入了错误的信息或其他内容，您会在输入框旁边看到红色文本。而且我不想使用 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>

Answer 1

您可以在验证字段旁边放置一个范围/标签，其中包含预定义的文本和样式以及 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=""