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=""

Answer 2

您可以将文本框边框颜色设置为红色并在其下方显示错误，而不是显示警告消息框。比如，如果您替换以下代码行：

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中显示错误。

希望这可以提供帮助。

Answer 3

你的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;
        }

Answer 4

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

<强> HTML：

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

<强> JS：

function validateUser(formObj) {}

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

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

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

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

Answer 5

这应该有所帮助。

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;
}

没有警报的表单验证

5 个答案: