Javascript 无警报的表单验证

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

---

您可以在已验证字段旁边放置一个span/标签，该字段具有预定义的文本和样式，显示样式为“无”。如果验证检测到无效输入-将显示样式更改为使标签可见

更新

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

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

使用

---

您可以在已验证字段旁边放置一个span/标签，该字段具有预定义的文本和样式，显示样式为“无”。如果验证检测到无效输入-将显示样式更改为使标签可见

更新

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

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

使用

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

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

---

首先，我建议将函数的execute附加到submit上的事件

HTML:

JS:

函数validateUserformObj{}

接下来，您需要做的唯一一件事就是使用某种容器，如果函数检测到错误，只需将错误文本附加到它

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

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

---

document.getElementByIdemailmsg.innerHTML=不酷

首先，我建议将函数的execute附加到submit上的事件

HTML:

JS:

函数validateUserformObj{}

接下来，您需要做的唯一一件事就是使用某种容器，如果函数检测到错误，只需将错误文本附加到它

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

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

---

document.getElementByIdemailmsg.innerHTML=不酷

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

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

与：

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

---

希望这能有所帮助。

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

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

与：

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

希望这能有所帮助。

这应该会有所帮助

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

这应该会有所帮助

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

---

查看document.querySelector和document.queryselectoral。使用它们，您可以像使用jQuery一样选择DOM对象。请记住，您将得到一个正常的DOM对象，而不是jQuery对象。@shin他不想在document.querySelector和document.querySelector中使用jqueryLook。使用它们，您可以像使用jQuery一样选择DOM对象。请记住，您将得到一个正常的DOM对象，而不是jQuery对象。@shin他不想使用jQuery