如何在javascript验证中放入错误

how to put errors in javascript validation

本文关键字：错误 验证 javascript      更新时间：2023-09-26

我正在使用带有警报的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>

问题是我想要的是errordiv而不是alerts。如何在div中添加error和success类而不是alert？请帮忙。

我想你想展示一种比提醒更好的显示错误的方法

用display:none 在页面的最底部放一个div

仅使用的警报插页

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

首先，您使用的是表结构，我认为列表在div标记中很好。。。。这将很容易发送数据。。。。。。。

现在我明白了。。。在每个输入框附近使用跨度标签，如

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

或者在java脚本中定义span 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;
}

当您开始验证时，有一个单一的标志，如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中。

相关文章：