我会尽力解释这个问题。好的,所以这是我的代码:
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
var at = "@";
var dot = ".";
var lat = email.indexOf(at);
var lstr = email.length;
var ldot = email.indexOf(dot);
var success = true;
if (name == null || name == "") {
success = false;
document.getElementById("name-error").innerHTML = "I want to know who you are!";
}
if (document.contact.name.value.length <= 5) {
success = false;
document.getElementById("name-error").innerHTML = "Full name, please!";
}
if (email.indexOf(at) == -1 || email.indexOf(at) == 0 || email.indexOf(at) == lstr) {
success = false;
document.getElementById("email-error").innerHTML = "That's not an email!";
}
if (email == null || email == "") {
success = false;
document.getElementById("email-error").innerHTML = "Give me your email!";
}
if (document.contact.email.value.length <= 8) {
success = false;
document.getElementById("email-error").innerHTML = "Email is too short!";
}
if (subject == null || subject == "") {
success = false;
document.getElementById("subject-error").innerHTML = "I need a subject!";
}
if (document.contact.subject.value.length <= 5) {
success = false;
document.getElementById("subject-error").innerHTML = "A longer subject would be nice.";
}
if (message == null || message == "") {
success = false;
document.getElementById("message-error").innerHTML = "Don't forget your message!";
}
if (document.contact.message.value.length <= 30) {
success = false;
document.getElementById("message-error").innerHTML = "Your message is too concise!";
}
return success;
}
我的问题是,即使id的值为空,它仍然表示它太短。例如,当我单击发送按钮时,它表示名称字段太短,即使它是空的。我以为我说如果名字==“”(这是空的),说“我想知道你是谁!”。但是现在,它只是说,“全名请”,如果名称的值是&lt; = 5,则显示为suppost ...而不是当它为空时。得到我在说什么?
答案 0 :(得分:2)
将其变为elseif
而不是具有两个独立的独立条件:
if(name == null || name == "") {
success = false;
document.getElementById("name-error").innerHTML = "I want to know who you are!";
}
else if(document.contact.name.value.length <= 5) {
success = false;
document.getElementById("name-error").innerHTML = "Full name, please!";
}
答案 1 :(得分:1)
您提到与字段相关的所有条件仅为if
,但实际上您需要将其视为if.. else
或if... else if.. else
语句。
如果你只提及if语句,那么它将执行一个字段的所有相关代码,并且它将显示你分配给innerHTML
的后一个值,它总是“电子邮件太短!“在您的”电子邮件字段“条件中。
答案 2 :(得分:0)
这是您的修正代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form validation</title>
<script>
function validation() {
var name = document.getElementById("name").value.trim();
var email = document.getElementById("email").value.trim();
var subject = document.getElementById("subject").value.trim();
var message = document.getElementById("message").value.trim();
var at = "@";
var dot = ".";
var lat = email.indexOf(at);
var lstr = email.length;
var ldot = email.indexOf(dot);
var success = true;
if(name == null || (name.length)==0) {
success = false;
document.getElementById("name-error").innerHTML = "I want to know who you are!";
}else{
document.getElementById("name-error").innerHTML = "";
}
if(name.length > 1 && document.contact.name.value.length < 5) {
success = false;
document.getElementById("name-error").innerHTML = "Full name, please!";
}
if(email == null || email.length==0) {
success = false;
document.getElementById("email-error").innerHTML = "Give me your email!";
}else{
document.getElementById("email-error").innerHTML = "";
}
if(email.length > 1 && document.contact.email.value.length <= 8){
success = false;
document.getElementById("email-error").innerHTML = "Email is too short!";
}
if(email.length > 8 && email.indexOf(at) == -1 || email.indexOf(at) == 0 || email.indexOf(at) == lstr){
success = false;
document.getElementById("email-error").innerHTML = "That's not an email!";
}
if(subject == null || subject.length==0) {
success = false;
document.getElementById("subject-error").innerHTML = "I need a subject!";
}else{
document.getElementById("subject-error").innerHTML = "";
}
if(subject.length > 0 && document.contact.subject.value.length <= 5){
success = false;
document.getElementById("subject-error").innerHTML = "A longer subject would be nice.";
}
if(message == null || message.length==0) {
success = false;
document.getElementById("message-error").innerHTML = "Don't forget your message!";
}else{
document.getElementById("message-error").innerHTML = "";
}
if(message.length > 0 && document.contact.message.value.length <= 30){
success = false;
document.getElementById("message-error").innerHTML = "Your message is too concise!";
}
return success;
}
</script>
</head>
<body>
<form action="" method="post" name='contact'>
<input type="text" name="name" id="name" value=''/>
<span id="name-error"></span>
<br />
<input type="text" name="email" id="email" value=''/>
<span id="email-error"></span>
<br />
<input type="text" name="subject" id="subject" value=''/>
<span id="subject-error"></span>
<br />
<input type="text" name="message" id="message" value=''/>
<span id="message-error"></span>
<br />
<input type="button" value="Send" onclick='return validation();'>
</form>
</body>
</html>