Question

我正在尝试使用javascript验证表单，但我无法获得正确的输出。我已经完成了所有事情，但我不知道我的代码有什么问题。以下是该计划。在这里插入标题 function formValid（） {

 var fname=document.getElementsByName("fname").value;
 var lname=document.getElementsByName("lname").value;
 var uid=document.getElementsByName("uid").value;
 var pass=document.getElementsByName("pass").value;
 var ftype=document.getElementsByName("ftype").value;
 var dep=document.getElementsByName("dep").value;
 var mnum=document.getElementsByName("mnum").value;
 var cpass=document.getElementsByName("cpass").value;
 var email=document.getElementsByName("email").value;

 if(fname==null && lname==null)
    {
        alert("Enter Your name ");
        return false;
    }

 if(uid==null)
    {
        alert("Enter your user ID");
        return false;
    }
 if(pass==null && cpass==null)
 { 
    alert("Enter password");
    return false;
 }
     if(pass!=cpass)
    {
        alert("Password doesnt match");
        return false;
    }
    if(ftype==null)
    {
        alert("Select faculty type");
        return false;

    }
  if(dep==null)
    {
        alert("select department ");
        return false;

    }
  if(mnum==null)
    {
        alert("Enter your Mobile number");
        return false;
    }

   if(email==null)
        {
    alert("Enter your email number");
    return false;
    }

     }
      </script>
      <center>
      <font size="6%" >Collage Managment System</font>

  <hr width="90%">
  <form  action="Form" method="post" name="myForm" onsubmit="return formValid();">

    <div id=container>
    <table>
    <tr><td>
    First Name</td><td>:<input type="text" name="fname">
    </td></tr>
    <tr><td>
    Last Name</td><td>:<input type="text" name="lname">
    </td></tr>
    <tr><td>
    User ID</td><td>:<input type="text" name="uid">
    </td></tr>
    <tr><td>
    Password</td><td>:<input type="password" name="pass">
    </td></tr>
    <tr><td>
    Confirm Password</td><td>:<input type="password" name="cpass">
    </td></tr>

    <tr><td>
    Faculty Type</td><td>:<select  name="ftype">
                            <option>Select</option>
                            <option>HOD</option>
                            <option>Assistant Proffesor</option>
                        </select>
    </td></tr>

    <tr><td>
    Deparment</td><td>:<select name="dep">
                            <option>Select</option>
                            <option>CSE</option>
                            <option>EC</option>
                            <option>ME</option>
                            <option>CIVIL</option>

                        </select>
    </td></tr>
    <tr><td>
    Mobile Number</td><td>:<input type="text" name="mnum">
    </td></tr>
    <tr><td>
    E-mail</td><td>:<input type="text" name="email">
    </td></tr>

    </table>
    <input type="reset" value="reset"><input type="submit" value="Register" >

    </div>  
     </form>
  </center>
      </body>
      </html>

在javascript中的上述代码中，如果在数据为空时执行第一个条件，但问题是当我在文本框中输入内容时它仍然显示警告。检查并告诉我我的错误.... 感谢

Answer 1

@Saleem 您需要在标记和脚本中进行以下更改

fname将是 nodeList对象，因为您使用 getElementsByName 使用nodeList index获取单个节点对象的值或输入文本在你的情况下元素。
```
var fname = document.getElementsByName("fname")[0].value;
```

只有您需要添加 fname ==“”这将检查文本字段的值或下拉列表是空白还是没有fname == null

if ((fname == null || fname == "") && (lname == null || lname == "")) {
  alert("Enter Your name ");
  return false;

}

要获取下拉元素的值，您应该对您的脚本和html采用以下更改

var ftype =document.getElementsByName("ftype")[0][document.getElementsByName("ftype")[0].selectedIndex].value;

为下拉列表元素添加选项值：

              <select name="ftype">
                    <option value="">Select</option>
                    <option value="HOD">HOD</option>
                    <option value="Assistant Proffesor">Assistant Proffesor</option>
             </select>

             <select name="dep">
                    <option value="">Select</option>
                    <option value="CSE">CSE</option>
                    <option value="EC">EC</option>
                    <option value="ME">ME</option>
                    <option value="CIVIL">CIVIL</option>
            </select>

请参阅JSFiddle上的完整工作示例 http://jsfiddle.net/aaadesh/RaXZA/

Answer 2

getElementsByName()函数返回一个NodeList对象。您无法直接从该对象获取值。代替：

var fname=document.getElementsByName("fname")[0].value;

如果您不是100％确定命名元素存在，那么您需要确保返回的值 - NodeList，即 - 确实包含一个元素：

var list = document.getElementsByName("fname");
var fname = list.length == 1 ? list[0] : null;

Answer 3

getElementsByName Returns the array of elements whoose name is specified as argument

所以你必须指定索引才能使用该值。

例如：

var ele  = document.getElementsByName("fname");
//ele[0] is the first element
// and its value is ele[0].value

但旧版浏览器可能不支持getElementsByName

javaScript中的表单验证无效

3 个答案: