简体   繁体   English

JavaScript表单验证帮助

[英]Javascript form verification help

Hey guys, I just updated my signup form to include drop down menu selectors to select gender and class and section. 大家好,我刚刚更新了注册表单,以包含下拉菜单选择器,以选择性别,班级和部门。 But I don't know how to verify them and check that a value is selected. 但是我不知道如何验证它们并检查是否选择了一个值。 Here is the code: 这是代码:

<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>

My question is what can I add to the Validate function so that it returns false if the values selected are "Please select your ... " 我的问题是我可以添加到Validate函数中,以便如果选择的值为“请选择您的...”,则它返回false。

Edit(1): Ok I tried this but it didn't seem to work, what's wrong? Edit(1):好的,我尝试了一下,但是似乎没有用,怎么了?

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

Edit(2): Never mind I got it to work. 编辑(2):没关系,我可以使用它。

“请选择您的...”的selectedIndex将为0,因此您的代码应检查select控件的selectedIndex始终大于0。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM