Javascript表单验证帮助

时间:2011-01-06 11:23:22

标签: javascript html forms

嘿伙计们,我刚刚更新了我的注册表单,其中包括下拉菜单选择器,用于选择性别,课程和部分。但我不知道如何验证它们并检查是否选择了一个值。 这是代码:

<form name="registration_form" method="post" action="register.php" onsubmit="return Validate();"><input type=hidden name=todo value=post>
            <table>
            <tr><td class="label">First Name:</td><td><input type="text" name="fname"></td></tr>
            <tr><td class="label">Last Name:</td><td><input type="text" name="lname"></td></tr>
            <tr><td class="label">Gender:</td><td><select name="gender">
                                                            <option>Select your gender:</option>
                                                            <option value="M">Male</option>
                                                            <option value="F">Female</option>
                                                            </select></td></tr>
            <tr><td class="label">E-Mail Address:</td><td><input type="email" name="email"></td></tr>
            <tr><td class="label">Username:</td><td><input type="text" name="username"></td></tr>
            <tr><td class="label">Password:</td><td><input type="password" name="password"></td></tr>
            <tr><td class="label">Password Confirmation:</td><td><input type="password" name="password_confirmation"></td></tr>
            <tr><td class="label">Class:</td><td><select name="class">
                                                            <option>Select your class:</option>
                                                            <option value="1">Grade 1</option>
                                                            <option value="2">Grade 2</option>
                                                            <option value="3">Grade 3</option>
                                                            <option value="4">Grade 4</option>
                                                            <option value="5">Grade 5</option>
                                                            <option value="6">Grade 6</option>
                                                            <option value="7">Grade 7</option>
                                                            <option value="8">Grade 8</option>
                                                            <option value="9">Grade 9</option>
                                                            <option value="10">1S</option>
                                                            <option value="11">2S</option>
                                                            <option value="12">3S</option>
                                                            </select></td></tr>     
            <tr><td class="label">Section:</td><td><select name="section">
                                                            <option>Select a section:</option>
                                                            <option value="A">A</option>
                                                            <option value="B">B</option>
                                                            <option value="C">C</option>
                                                            <option value="D">D</option>
                                                            <option value="S">S</option>
                                                            <option value="SE">SE</option>
                                                            <option value="GS">GS</option>
                                                            <option value="LS">LS</option>
                                                            </select></td></tr>                                                                                     
            <tr><td>Are you human?</td></tr>
            </table>
            <?php
             ini_set('display_errors', 'On');
             error_reporting(E_ALL | E_STRICT);
          require_once('recaptchalib.php');
          $publickey = "6LfF478SAAAAAFR1_ZfSFzGyEhkcXlNVRg8iJeWU"; // you got this from the signup page
          echo recaptcha_get_html($publickey);
                ?>
        <table>
            <tr><td class="label"><input class="submitButton" type="submit" value="Register"></td></tr>
            </table>
            </form>
        </div>
    <script language = "Javascript">

function Validate()
{
    if (document.registration_form.fname.value == '') 
    {
        alert('Please fill in your  first name!');
        return false;
    }
    if (document.registration_form.lname.value == '') 
    {
        alert('Please fill in your last name!');
        return false;
    }
    if (document.registration_form.email.value == '') 
    {
       alert('Please fill in your email address!');
       return false;
    }
    if (document.registration_form.username.value == '') 
    {
        alert('Please fill in your desired username!');
        return false;
    }
    if (document.registration_form.password.value == '') 
    {
       alert('Please fill in your desired password!');
      return false;
    }
    if (document.registration_form.password_confirmation.value == '') 
    {
       alert('Please fill in your password again for confirmation!');
      return false;
    }
    if (document.registration_form.password.value != 
    document.registration_form.password_confirmation.value) 
    {
        alert("The two passwords are not identical! "+
        "Please enter the same password again for confirmation!");
        return false;
    }
    return true;
}
</script>

我的问题是我可以添加到Validate函数中,以便在选择的值为“Please select your ...”时返回false

编辑(1):好的,我试过这个,但它似乎不起作用,出了什么问题?

var selectedClass = document.getElementById("class");
        if(selectedClass.selectedIndex ==0){
            alert('Please select your class!');
            return false; 
        }

编辑(2):没关系我让它发挥作用。

2 个答案:

答案 0 :(得分:0)

“请选择你的...”的selectedIndex为0,因此你的代码应检查select控件的selectedIndex是否总是大于0。

答案 1 :(得分:0)

function validate(){
 var selectedClass = doument.getElementById("Class");
 if(selectedClass.selectedIndex ==0){
  alert(selectedClass.options[0].text);
  return false; 
 }
}