0

我在使用 javascript 验证时遇到了一些小问题。我需要验证表单中的选择下拉菜单。到目前为止，我可以验证所有字段，但不知何故我无法验证选择下拉列表？有人可以帮我验证我的表格吗？

这是我的javascript：

 <script type="text/javascript">

if( document.form1.Email.value != "" )
   {
     // Put extra check for data format
     var ret = validateEmail(document.form1.Email);
     if( ret == false )
     {
          return false;
     }
   }
} 

function validate()
{
//username password First_n Last_n Company Mobile Email Residence



   if( document.form1.First_n.value == "" )
   {
     alert( "Please enter your first name!" );
     document.form1.First_n.focus() ;
     return false;
   }
   if( document.form1.Last_n.value == "" )
   {
     alert( "Please enter your last name!" );
     document.form1.Last_n.focus() ;
     return false;
   }
   if( document.form1.username.value == "" )
   {
     alert( "Please enter your username!" );
     document.form1.username.focus() ;
     return false;
   }

   if( document.form1.password.value == "" )
   {
     alert( "Please enter your password!" );
     document.form1.password.focus() ;
     return false;
   }
   if( document.form1.Mobile.value == "" )
   {
     alert( "Please provide us your mobile number!" );
     document.form1.Mobile.focus() ;
     return false;
   }
   if( document.form1.Email.value == "" )
   {
     alert( "Please provide us your Email!" );
     document.form1.Email.focus() ;
     return false;
   }
var yourSelect = document.getElementById('Residence');
   alert(yourSelect.options[yourSelect.selectedIndex].value)
   if(yourSelect.options[yourSelect.selectedIndex].value == '' )
   {
     alert( "Please provide your country!" );
     return false;
   }
   if( document.form1.Email.value != "" )
   {
     // Put extra check for data format
     var ret = validateEmail(document.form1.Email);
     if( ret == false )
     {
          return false;
     }
   }

   return( true );
}
</script>

我的表格：

<form name="form1" method="post" action="add_new.php" onsubmit="return(validate(false));">
<div style="clear:both;padding:0px 10px 0 10px;margin-bottom:40px;">
<h5>Interested in</h5>
<input id="toggle-on" class="toggle toggle-left" name="toggle" value="Hosting" type="radio" checked>
<label for="toggle-on" class="btn">Hosting</label>
<input id="toggle-off" class="toggle toggle-right" name="toggle" value="Email accounts" type="radio"
><label for="toggle-off" class="btn">Email accounts</label>
</div> 
<div style="clear-both;">
<input name="First_n" type="text" placeholder="First Name*" class="login-text-lbl-pink-no-width" id="First_n">     
<input name="Last_n" type="text" placeholder="Last Name*" class="login-text-lbl-pink-no-width" id="Last_n">              
</div>
<input name="username" type="text" placeholder="Username*" class="login-text-lbl-pink-no-width" id="username"><br/>
<input name="password" type="password" placeholder="Password*" class="login-text-lbl-pink-no-width" id="password"><br/>
<input name="Company" type="text" placeholder="Company" class="login-text-lbl-pink-odd" id="Company">              <br/>
<input name="Mobile" type="text" placeholder="Phone Number*" class="pink-transparent-item" id="Mobile">              <br/>
<input name="Email" type="text"  placeholder="Email*" class="login-text-lbl-pink-odd" id="Email">              <br/>
<select name="Residence" id="Residence" style="background-color: rgba(240, 96, 96, 0.62);border: none;-webkit-appearance: none;
-moz-appearance: none;appearance: none;height: 40px;font-style: italic;width: 270px;padding: 10px;margin: 5px;color: #552726;border-radius: 5px;border: none;float: left;" class="required">
<option value="zero" selected>Country*</option>
<option value="US">America</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="HK">Hong Kong</option><br/>
<input name="domain" class="login-text-lbl-pink-odd" type="text" style="width:350px;margin-bottom:40px;" placeholder="Existing domain" id="domain">              <br/>

<input type="submit" name="Submit" value="Submit" style='font-family: "Neo Sans Light", Verdana, Tahoma;' class="login-button-pink">
</form>
4

2 回答 2

0

问题在于以下代码：

if( document.form1.Email.value != "" )
   {
     // Put extra check for data format
     var ret = validateEmail(document.form1.Email);
     if( ret == false )
     {
          return false;
     }else 
          return true;
   }

在上面的代码中，当用户输入有效的电子邮件时，您将返回 TRUE，因此验证国家/地区的代码永远不会执行。

从上面的代码片段中删除 else 部分。

于 2013-08-08T07:14:56.673 回答
0

我相信问题出在国家验证之前发生的电子邮件验证中，因为如果输入了电子邮件地址，无论电子邮件是否通过验证，它都会从函数返回，因此它永远不会到达国家位：

   if( document.form1.Email.value != "" )
   {
     // Put extra check for data format
     var ret = validateEmail(document.form1.Email);
     if( ret == false )
     {
          return false;
     }else      
          return true;       // delete this line, and the else
   }

如果出现问题，您希望返回 false，但您不想在函数结束之前返回 true。

更新：更新问题中现在显示的代码不起作用，因为：

  • 您删除了validateEmail()函数声明（用我说要在末尾更改的代码副本替换它validate()- 除非这只是问题中的一个奇怪的复制/粘贴错误）
  • 您将if国家/地区的测试更改为检查空字符串，但没有将相应value="zero"的更新为value=""

如果您修复这些问题，则如下所示：http: //jsfiddle.net/58A7K/

另请注意，我上面显示的代码可以简化 - 您不需要ret变量：

if( document.form1.Email.value != "" ) {
    if (!validateEmail(document.form1.Email)) {
        return false;
    }
}
于 2013-08-08T07:10:07.180 回答