页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

JavaScript检查表单是否为空的函数

发布：dxy 字体：[增加减小] 类型：转载

var textboxs = new Array(); // text类型的input集合
  var radioList = new Object(); // radio类型的input集合，因为Radio比较特殊，要一组一组检测，所以这里用一个Hashtable，根据radio的name作为Key来保存所有的Radio集合
  var radioes; // 每一个name对应的Radio集合
  var inputs = myform.getElementsByTagName("INPUT"); // 取form下的所有input

点击运行可以看到效果:

<script> 
function fn(myform) 
{ 
  var ipt; 
  var textboxs = new Array(); // text类型的input集合 
  var radioList = new Object(); // radio类型的input集合，因为Radio比较特殊，要一组一组检测，所以这里用一个Hashtable，根据radio的name作为Key来保存所有的Radio集合 
  var radioes; // 每一个name对应的Radio集合 
  var inputs = myform.getElementsByTagName("INPUT"); // 取form下的所有input 
   
  // 遍历所有INPUT 
  // 
  for (var i=0; i<inputs.length; i++) 
  { 
    ipt = inputs[i ]; 
    if (ipt.type == "text") 
    { 
      textboxs[textboxs.length] = ipt; 
    } 
    // 本来只要检测radiobox的，后来要增加checkbox， 
    //因为处理方式一样，只要这里修改一下就可以了，但是命名没有同步修改:) 
    // 
    else if (ipt.type == "radio" || ipt.type == "checkbox")  
    { 
      radioes = radioList[ipt.name]; 
      if (!radioes) 
      { 
        radioes = new Array(); 
      } 
      radioes[radioes.length] = ipt; 
      radioList[ipt.name] = radioes; 
    } 
  }

// 非空检测 
  // 
  for (var i=0; i<textboxs.length; i++) 
  { 
    var txt = textboxs[i ]; 
    if (txt && txt.value == "") 
    { 
      alert("please fill:" + txt.name); 
      txt.focus(); 
      return false; 
    } 
  }

// 遍历所有Radiobox组 
  // 
  for (var radioboxName in radioList) 
  { 
    radioes = radioList[radioboxName]; 
    var chk = false; // 是否有选中的 
    var radio;  
    // 检测该组Radio是否都选中了 
    // 
    for (var j=0; j<radioes.length; j++) 
    { 
      var radio = radioes[j]; 
      if (radio.checked) 
      { 
        chk = true; 
        break; 
      } 
    } 
    if (!chk) // 没有选中的 
    { 
      alert("please select: " + radioboxName); 
      return false; 
    } 
  }

return true; 
} 
</script> 
<form method="post" action="" onsubmit="return fn(this);"> 
<input type="text" name="a1" /> 
<input type="text" name="a2" /> 
<input type="radio" name="b2" /> 
<input type="radio" name="b2" /> 
<input type="radio" name="b2" /> 
<input type="text" name="a3" />

<input type="radio" name="b1" /> 
<input type="radio" name="b1" />

<input type="checkbox" name="c1" /> 
<input type="checkbox" name="c1" /> 
<input type="submit" /> 
</form>

<form method="post" action="" onsubmit="return fn(this);"> 
<input type="text" name="a1" /> 
<input type="text" name="a2" /> 
<input type="radio" name="b2" /> 
<input type="radio" name="b2" /> 
<input type="radio" name="b2" /> 
<input type="text" name="a3" />

<input type="radio" name="b1" /> 
<input type="radio" name="b1" />

<input type="checkbox" name="c1" /> 
<input type="checkbox" name="c1" /> 
<input type="submit" /> 
</form>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：JavaScript检查表单是否为空的函数

百度中搜索更多的关于JavaScript检查表单是否为空的函数内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：javascript之文本框输入四个数字自动加空格的脚本
下一篇文章：js下拉框里超过变成省略号

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行