Question

我正在使用带有警报的JavaScript验证。完整的代码是：

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
function validateEmail()
{

   var emailID = document.myForm.EMail.value;
   atpos = emailID.indexOf("@");
   dotpos = emailID.lastIndexOf(".");
   if (atpos < 1 || ( dotpos - atpos < 2 )) 
   {
       alert("Please enter correct email ID")
       document.myForm.EMail.focus() ;
       return false;
   }
   return( true );
}

function validate()
{
   if( document.myForm.Name.value == "" )
   {
     alert( "Please provide your name!" );
     document.myForm.Name.focus() ;
     return false;
   }
   if( document.myForm.EMail.value == "" )
   {
     alert( "Please provide your Email!" );
     document.myForm.EMail.focus() ;
     return false;
   }else{
     // Put extra check for data format
     var ret = validateEmail();
     if( ret == false )
     {
          return false;
     }
   }
   if( document.myForm.Zip.value == "" ||
           isNaN( document.myForm.Zip.value ) ||
           document.myForm.Zip.value.length != 5 )
   {
     alert( "Please provide a zip in the format #####." );
     document.myForm.Zip.focus() ;
     return false;
   }
   if( document.myForm.Country.value == "-1" )
   {
     alert( "Please provide your country!" );
     return false;
   }
   return( true );
}
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm"  onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
   <td align="right">Name</td>
   <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
   <td align="right">EMail</td>
   <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
   <td align="right">Zip Code</td>
   <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
   <option value="-1" selected>[choose yours]</option>
   <option value="1">USA</option>
   <option value="2">UK</option>
   <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
 <td align="right"></td>
 <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

问题是我想要错误div而不是alerts.how我是否会添加错误和成功而不是警告类的div？请帮助。

Answer 1

我想你想要展示一种比警报更好的显示错误的方法

使用display:none

在页面底部放置一个div

警报只是使用

ShowError('yourmsg');

function ShowError(msg){
setTimeOut(function(){
document.getElementById('error').innerHTML  = msg;
},4000);
}

Answer 2

当您开始验证时，会有一个标记，例如blIsFormValid并保留一个字符串var strErrorMsg

在验证表单时，如果遇到一个验证错误，请将blIsFormValid设置为false。接下来，每当您遇到验证错误时，请将该错误写入strErrorMsg。

例如：

function validate()
{
    var  blIsFormValid = true;
    var strErrMsg = '';
    if( document.myForm.Name.value == "" )
    {
        blIsFormValid = false;
        strErrMsg += "Please enter your name. <br />";       
    }
    if(isEmailValid(document.myForm.Email.value))
    {
        blIsFormValid = false;
        strErrMsg += "Please enter a valid email. <br />";      
    }
    // Add the end checkk...

    is(!blIsFormValid)
    {
        document.getElementById('errDiv').innerHTML = strErrMsg;

    }
    return blIsFormValid;
}

最后检查blIsFormValid的布尔值并将其放入错误div。

Answer 3

首先你使用表结构，我认为列表在DIV标签内是好的....这将很容易找到数据.......

现在我提出要点......在每个输入框附近使用span标签，比如

<tr>
   <td align="right">Name</td>
   <td><input type="text" name="Name" /></td>
   <span id="nameError"></span>
</tr>

或在java-script中定义跨度Id的错误。就像这个

if( document.myForm.Name.value == "" )
{
    //   alert( "Please provide your name!" );
    document.getElementById("nameError").innerHTML="Plz provide your name ";
    document.myForm.Name.focus() ;
    return false;
}

如何在javascript验证中输入错误

3 个答案: