Question

我在上一个示例中使用span进行了表单验证 cannot display all warning message in form validation with span

但是当我在一个字段上使用超过1个验证时，我会面临像

这样的跨度显示的问题

 var x=document.forms["reg"]["email"].value;
  var atpos=x.indexOf("@");
   var dotpos=x.lastIndexOf(".");
 if(x ==null || x=="")
 {
   document.getElementById("error2").innerHTML = "enter Email"

   $var=false;
 }
 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
 {
   document.getElementById("error3").innerHTML = "enter correct Email"
   $var=false;
 }

并在表单字段中

                <td>Email:</td>
                <td><input type="text" name="email" id="email"    /><span id="email_error" style="color:red;"></span>
                <span id="error2" style="color:red;"></span>
                <span id="error3" style="color:red;"></span></td>

如果我使用此代码并将该字段留空，则会显示两个错误 “输入电子邮件输入正确的电子邮件”。我该如何解决这个问题？

Answer 1

因为您的脚本在页面加载后立即调用，并且没有任何提供的值，因此它会按预期运行，您可以在其周围放置一个函数并从中调用form onsubmit ，或电子邮件onblur元素上的内联事件处理程序，例如input。

我不知道$var是什么，但它是未声明的

试试这个

<input type="text" name="email" id="email"  onblur="checkEmailField()"/>

以及以下功能，除非用户专注于电子邮件字段，否则不会显示“输入电子邮件”，然后离开字段而不输入任何内容。

function checkEmailField(){


 var x=document.forms["reg"]["email"].value;
  var atpos=x.indexOf("@");
   var dotpos=x.lastIndexOf(".");
if(x ==null || x=="" )
{
  document.getElementById("error2").innerHTML = "enter Email"
document.getElementById("error3").innerHTML = "";
   $var=false;
}else 

 if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length &&  x != "" && x!=null)
 {
 document.getElementById("error2").innerHTML = "";
document.getElementById("error3").innerHTML = "enter correct Email"

 $var=false;
}
}

使用单个文本框的多个span错误类

1 个答案: