如何用JS实现验证多个input不为空？

时间：2022-11-06 19:35:25


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>增加Table行</title>

</head>

<script language="javascript">// Example: obj = findObj("image1");

function findObj(theObj, theDoc){ 

    var p, i, foundObj;

    if(!theDoc) theDoc = document;  

    if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)  {

        theDoc = parent.frames[theObj.substring(p+1)].document;    

        theObj = theObj.substring(0,p);  

    }  

    if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];  

    for(i=0; !foundObj && i < theDoc.forms.length; i++)  foundObj = theDoc.forms[i][theObj];  

    for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document);  

    if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;

}

//添加一个参与人填写行

function AddSignRow(){ //读取最后一行的行号，存放在txtTRLastIndex文本框中

     var txtTRLastIndex = findObj("txtTRLastIndex",document);

     var rowID = parseInt(txtTRLastIndex.value);

     

     var signFrame = findObj("SignFrame",document);

     //添加行

     var newTR = signFrame.insertRow(signFrame.rows.length);

     newTR.id = "SignItem" + rowID;

     

     //添加列:序号

     var newNameTD=newTR.insertCell(0);

     //添加列内容

     newNameTD.innerHTML = newTR.rowIndex.toString();

     

     //添加列: 姓名

     var newNameTD=newTR.insertCell(1);

     //添加列内容

     newNameTD.innerHTML = "<input name='txtName[]' id='" + rowID + "' type='text' size='12' />";

     

     //添加列:电子邮箱

     var newEmailTD=newTR.insertCell(2);

     //添加列内容

     newEmailTD.innerHTML = "<input name='txtEmail[]' id='" + rowID + "' type='text' size='20' />";

     

     //添加列:删除按钮

     var newDeleteTD=newTR.insertCell(3);

     //添加列内容

     newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

     

     //将行号推进下一行

     txtTRLastIndex.value = (rowID + 1).toString() ;

}

//删除指定行

function DeleteSignRow(rowid){

     var signFrame = findObj("SignFrame",document);

     var signItem = findObj(rowid,document);

     

     //获取将要删除的行的Index

     var rowIndex = signItem.rowIndex;

     

     //删除指定Index的行

     signFrame.deleteRow(rowIndex);

     

     // 重新排列序号，如果没有序号，这一步省略

     for(i=rowIndex;i<signFrame.rows.length;i++){

      signFrame.rows[i].cells[0].innerHTML = i.toString();

     }

}//清空列表

function ClearAllSign(){

     if(confirm('确定要清空所有参与人吗？')){

          var signFrame = findObj("SignFrame",document);

          var rowscount = signFrame.rows.length;

         

          //循环删除行,从最后一行往前删除

          for(i=rowscount - 1;i > 0; i--){

           signFrame.deleteRow(i);

          }

         

          //重置最后行号为1

          var txtTRLastIndex = findObj("txtTRLastIndex",document);

          txtTRLastIndex.value = "1";

         

          //预添加一行

          AddSignRow();

     }

}

</script>

<body>

<form action="__URL__-text" method="post">

<div>

  <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">

    <tr id="trHeader">

      <td width="27" bgcolor="#96E0E2">序号</td>

      <td width="64" bgcolor="#96E0E2">用户姓名<!--<input type="text" name="txtName">--></td>

      <td width="98" bgcolor="#96E0E2">电子邮箱<!--<input type="text" name="txtEmail">--></td>

      <td width="57" align="center" bgcolor="#96E0E2">&nbsp;</td>

    </tr>

	<tr>

      <td>1</td>

      <td><input type="text" name="txtName"></td>

      <td><input type="text" name="txtEmail"></td>

      <td>&nbsp;</td>

    </tr>

  </table>

  <input name='para_total' type='hidden' value="rowID" /><input type="submit" value="确认">

</div></form>

<div>

  <input type="button" name="Submit" value="添加参与人" onClick="AddSignRow()" />

  <input type="button" name="Submit2" value="清空" onClick="ClearAllSign()" />

  <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />

</div>


</body>

</html>

我只能实现默认的第一行的input不为空验证，不能实现用JS添加出来的input的验证，我要实现验证所有的input不为空要怎么做。。

18 个解决方案

#1

如何用JS实现验证多个input不为空？

#2

ObjInput=document.getElementsByTagName( "input ") ;
var flag = false; 
for(i=0;i <ObjInput.length;i++){ 
    if(ObjInput[i].type== "text "){ 
        if(ObjInput[i].name==''){
            flag = true;
            break ;
        }
    } 
}
if(flag){
    alert("****不能为空！！") ;
}

#3

ObjInput=document.getElementsByTagName( "input ") ;
var flag = false;  
for(i=0;i <ObjInput.length;i++){  
  if(ObjInput[i].type== "text "){  
     if(ObjInput[i].value==''){
       flag = true;
       break ;
     }
  }  
}
if(flag){
  alert("****不能为空！！") ;
}

#4



    <span id="spInput"></span>

    <input type="button" id="inpAdd" value="Add Input" onclick="addInput()" />

    <input type="button" id="inpCheck" value="验证Input不为空" onclick="checkInput()" />



    function addInput()

    {

        document.getElementById("spInput").innerHTML+="<input type='text' /><br />";

    }

    function checkInput()

    {

        var inp = $("input[type='text']");

        for(var i=0;i<inp.length;i++)

        {

            if(inp[i].type=="text")

            {

                if(inp[i].value=='')

                {                

                alert('第'+(i+1)+'个input为空');

                return false;

                }

            }

        }

    }

#5

循环判断所有input的value

#6

引用 5 楼 chendong_j 的回复:
循环判断所有input的value

能给段例子吗？2楼的那个不能用啊

4楼的那个也不能用

#7

用个for循环判断一下就可以了、、

#8

在你用JS添加出来的每个input里，多添加一个class属性，比如class=texta，在最后提交的js里做循环判断
 如： 
for ( var i = 0; i < form.elements.length; i++) {

            var e = form.elements[i];

            if (e.className == "texta" ) {

                if(e.value=='')

                {                

                alert('input值不能为空！');

                return false;

               

                }

            }

}

#9

或者直接判断type类型是不是等于text 也行，例如： 


for ( var i = 0; i < form.elements.length; i++) {

            var e = form.elements[i];

            if (e.type == "text" ) {

                if(e.value=='')

                {                

                alert('input值不能为空！');

                return false;

               

                }

            }

}

#10

遍历所有input

#11

  


 <input slang='要判断'>


   读取 input 的属性 slang=='要判断'

#12



$('form input').each(function(){

   //方法体 

});



jquery的写法  遍历你的form表单的每一个input元素

#13

我的个人猜想，不带验证程序主体！ 



<head>

    <script language="javascript">

    .inpAdd

    #inpCheck

    </script>

</head>

<body>

    <span id="spInput"></span>

    <input type="button" id="inpAdd" value="Add Input" onclick="addInput()" />

    <input type="button" id="inpCheck" value="验证Input不为空" onclick="checkInput()" />

</body>

#14

 <input type="text" name="s1" id="s1">

  <select name="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>


<input type="button" onclick="copy()" value="copy"> <input type="text" name="s2" id="s2"><select name="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

</form> 

#15

用jqurey不行吗 很简单
$("input").click(function(){
if($(this).attr("value")==""){
alert("此input为空");
}esle{
alert($(this).attr("value"));
}
};

#16

$(":input").each(function(){
    if(!this.value)
       return false;
});
return true;

#17

  學習更健康

#18

这个好像最好用循环，不然太麻烦了！

#1

如何用JS实现验证多个input不为空？

#2

ObjInput=document.getElementsByTagName( "input ") ;
var flag = false; 
for(i=0;i <ObjInput.length;i++){ 
    if(ObjInput[i].type== "text "){ 
        if(ObjInput[i].name==''){
            flag = true;
            break ;
        }
    } 
}
if(flag){
    alert("****不能为空！！") ;
}

#3

ObjInput=document.getElementsByTagName( "input ") ;
var flag = false;  
for(i=0;i <ObjInput.length;i++){  
  if(ObjInput[i].type== "text "){  
     if(ObjInput[i].value==''){
       flag = true;
       break ;
     }
  }  
}
if(flag){
  alert("****不能为空！！") ;
}

#4



    <span id="spInput"></span>

    <input type="button" id="inpAdd" value="Add Input" onclick="addInput()" />

    <input type="button" id="inpCheck" value="验证Input不为空" onclick="checkInput()" />



    function addInput()

    {

        document.getElementById("spInput").innerHTML+="<input type='text' /><br />";

    }

    function checkInput()

    {

        var inp = $("input[type='text']");

        for(var i=0;i<inp.length;i++)

        {

            if(inp[i].type=="text")

            {

                if(inp[i].value=='')

                {                

                alert('第'+(i+1)+'个input为空');

                return false;

                }

            }

        }

    }

#5

循环判断所有input的value

#6

引用 5 楼 chendong_j 的回复:
循环判断所有input的value

能给段例子吗？2楼的那个不能用啊

4楼的那个也不能用

#7

用个for循环判断一下就可以了、、

#8

在你用JS添加出来的每个input里，多添加一个class属性，比如class=texta，在最后提交的js里做循环判断
 如： 
for ( var i = 0; i < form.elements.length; i++) {

            var e = form.elements[i];

            if (e.className == "texta" ) {

                if(e.value=='')

                {                

                alert('input值不能为空！');

                return false;

               

                }

            }

}

#9

或者直接判断type类型是不是等于text 也行，例如： 


for ( var i = 0; i < form.elements.length; i++) {

            var e = form.elements[i];

            if (e.type == "text" ) {

                if(e.value=='')

                {                

                alert('input值不能为空！');

                return false;

               

                }

            }

}

#10

遍历所有input

#11

  


 <input slang='要判断'>


   读取 input 的属性 slang=='要判断'

#12



$('form input').each(function(){

   //方法体 

});



jquery的写法  遍历你的form表单的每一个input元素

#13

我的个人猜想，不带验证程序主体！ 



<head>

    <script language="javascript">

    .inpAdd

    #inpCheck

    </script>

</head>

<body>

    <span id="spInput"></span>

    <input type="button" id="inpAdd" value="Add Input" onclick="addInput()" />

    <input type="button" id="inpCheck" value="验证Input不为空" onclick="checkInput()" />

</body>

#14

 <input type="text" name="s1" id="s1">

  <select name="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>


<input type="button" onclick="copy()" value="copy"> <input type="text" name="s2" id="s2"><select name="select">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>

</form> 

#15

用jqurey不行吗 很简单
$("input").click(function(){
if($(this).attr("value")==""){
alert("此input为空");
}esle{
alert($(this).attr("value"));
}
};

#16

$(":input").each(function(){
    if(!this.value)
       return false;
});
return true;

#17

  學習更健康

#18

这个好像最好用循环，不然太麻烦了！
标签：

相关文章