javascript 没有警报的表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16589007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form Validation without Alerts
提问by Elvain
I was wondering if there's a way to validate the form without using alerts. Like usually you would see red text beside the input box if you typed in the wrong information or something. And I don't want to use Jquery. I've included a div for the red text messages in the html - namemsg, commentmsg, emailmsg.
我想知道是否有一种方法可以在不使用警报的情况下验证表单。通常，如果您输入了错误的信息或其他内容，您会在输入框旁边看到红色文本。而且我不想使用 Jquery。我在 html 中为红色文本消息添加了一个 div - namemsg、commentmsg、emailmsg。
So far I've only got the code with alerts. JavaScript:
到目前为止，我只得到了带有警报的代码。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
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="[email protected]" 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>
回答by Yuriy Galanter
You can place a span/label next to validated field with predefined text and style and display style of none. If validation detects an invalid input - change the display style to "" to make the label visible.
您可以使用预定义的文本和样式以及none. 如果验证检测到无效输入 - 将显示样式更改为 "" 以使标签可见。
Update
更新
I do see you have already predefined DIV. Define it as
我确实看到您已经预定义了 DIV。将其定义为
<div id="emailmsg" style="color:Red;display:none">Not a valid e-mail address</div>
And in JavaScript instead of
而在 JavaScript 而不是
alert("Not a valid e-mail address");
Use
利用
document.getElementById("emailmsg").style.display=""
回答by asim-ishaq
Instead of showing alert message box you can color that textbox borders to red color and show the error beneath it. Like, if you replace the following line of code:
您可以将文本框边框着色为红色并在其下方显示错误，而不是显示警报消息框。就像，如果您替换以下代码行：
alert("Not a valid e-mail address");
With:
和：
document.forms["myForm"]["email"].style.border = "1px solid red";
document.getElementById("emailmsg").innerHTML = "Not a valid e-mail address";
The above code will highlight the borders of email field with red color and show error in emailmsg div.
上面的代码将用红色突出显示电子邮件字段的边框，并在 emailmsg div 中显示错误。
Hope this can help.
希望这能有所帮助。
回答by Cory
This should help.
这应该有帮助。
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;
}
回答by Muhammad Ramahy
your html:
你的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="[email protected]" 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>
your js:
你的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;
}
回答by Novak
First, I would recommend attaching the execute of the function to the event OnSubmit.
首先，我建议将函数的执行附加到 event OnSubmit。
HTML:
HTML：
<form method="post" name="myForm" onsubmit="return validateUser(this);">
<form method="post" name="myForm" onsubmit="return validateUser(this);">
JS:
JS：
function validateUser(formObj) {}
function validateUser(formObj) {}
Next, the only thing you need to do, is just have some sort of container, and if the function detects an error, just append the error text to it.
接下来，您唯一需要做的就是拥有某种容器，如果该函数检测到错误，只需将错误文本附加到其中即可。
At the start of each function call, empty the container.
在每个函数调用开始时，清空容器。
If you want the error to appear next to the textbox/any input tag, just add a div/spannext to each field and append the error to it.
如果您希望错误出现在文本框/任何输入标签旁边，只需在每个字段旁边添加一个div/span并将错误附加到它。
document.getElementById("emailmsg").innerHTML = "Not cool...";
document.getElementById("emailmsg").innerHTML = "Not cool...";
