0

我正在尝试使用 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代码中，如果第一个条件在数据为空时执行，但问题是当我在文本框中输入内容时它仍然显示警报。检查并告诉我我的错误....谢谢

4

3 回答 3

1

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

  • fname 将是nodeList 对象，因为您正在使用getElementsByName使用 nodeList 索引来获取单个节点对象的值或在您的情况下输入文本元素。

    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/上的完整工作示例

于 2013-11-01T06:36:11.193 回答
0 
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，旧浏览器可能不支持

于 2013-10-31T17:33:14.527 回答
0

该getElementsByName()函数返回一个 NodeList 对象。您不能直接从该对象中获取值。反而：

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

如果您不能 100% 确定命名元素是否存在，则需要确保返回的值（即 NodeList，即 NodeList）中确实有一个元素：

var list = document.getElementsByName("fname");
var fname = list.length == 1 ? list[0] : null;
于 2013-10-31T17:25:10.040 回答