100分请教，js如何实现一个表单中多个域的空值批量检测？

各位好，下图是一般的表单输入界面：
一般对它的空值检测，也就是检测是否为空（有没有输入内容），我目前的做法是：function Check(){
 if (document.form.user_name.value=="")
{
alert("请输入姓名！");
document.form.user_name.focus()
return false;
} if (document.form.usere_mail.value=="")
{
alert("请输入邮件地址！");
document.form.usere_mail.focus()
return false;
}//……以此类推
也就是利用 if (document.form.usere_mail.value=="")一个一个表单域的检测，这样当页面要填的表单域很多的话，这个js就要写很长。
请问高手，能否做成综合检测的js代码？
比如，用数组循环，应该怎么写？望指教，谢谢！

解决方案 »

  1.   

    var inputs=document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++){
    if(inputs[i].type=="text"){
    if(inputs[i].value==""){
    inputs[i].focus();
    return false;
    }
    }
    }
    return true;
    大体这样试试
      

  2.   

    如果是也有textarea域、select域呢，怎么考虑？
      

  3.   

     inputs=document.getElementsByTagName("input");
    inputs+=document.getElementsByTagName("textarea");
    inputs+=document.getElementsByTagName("select");我这么写对么？再追问，我加了一句提示语：
    alert("***不能为空！");
    这里的***能否获取到表单的文字说明，
    比如分别是姓名、年龄、民族……，这样提示更有针对性。
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function isOnlySpace(str){
    var a=str.replace(/\^s+/,"").replace(/\s+$/,"");
    if(a.length==0){
    return true;
    }
    return false;
    }
    function notNullCheck(){
    var inputs=document.getElementsByTagName("input");
    for(var i=0;i<inputs.length;i++){
    if(inputs[i].type=="text"){
    if(isOnlySpace(inputs[i].value)){
    inputs[i].style.backgroundColor="red";
    return false;
    }else{
    inputs[i].style.backgroundColor="green";
    }
    }
    }
    var textareas=document.getElementsByTagName("textarea");
    for(var i=0;i<textareas.length;i++){
    if(isOnlySpace(textareas[i].value)){
    textareas[i].style.backgroundColor="red";
    return false;
    }else{
    textareas[i].style.backgroundColor="green";
    }
    }
    var selects=document.getElementsByTagName("select");
    for(var i=0;i<selects.length;i++){
    if(selects[i].selectedIndex==0){
    selects[i].style.backgroundColor="red";
    return false;
    }else{
    selects[i].style.backgroundColor="green";
    }
    }
    return true;
    }
    </script>
    </head><body>
    <input type="text">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <input type="text">
    <input type="text">
    <select>
    <option>请选择</option>
        <option>1</option>
    </select>
    <input type="button" onclick="notNullCheck()" value="notnullcheck">
    </body>
    </html>
    大体这样试试
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function isOnlySpace(str){
    var a=str.replace(/\^s+/,"").replace(/\s+$/,"");
    if(a.length==0){
    return true;
    }
    return false;
    }
    function notNullCheck(){
    var documents=document.getElementsByTagName("*");
    for(var i=0;i<documents.length;i++){
    if(documents[i].tagName=="INPUT"){
    if(documents[i].type=="text"){
    if(isOnlySpace(documents[i].value)){
    documents[i].style.backgroundColor="red";
    return false;
    }else{
    documents[i].style.backgroundColor="green";
    }
    }
    }else if(documents[i].tagName=="TEXTAREA"){
    if(isOnlySpace(documents[i].value)){
    documents[i].style.backgroundColor="red";
    return false;
    }else{
    documents[i].style.backgroundColor="green";
    }
    }else if(documents[i].tagName=="SELECT"){
    if(documents[i].selectedIndex==0){
    documents[i].style.backgroundColor="red";
    return false;
    }else{
    documents[i].style.backgroundColor="green";
    }
    }
    }
    }
    </script>
    </head><body>
    <input type="text">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <input type="text">
    <input type="text">
    <select>
    <option>请选择</option>
        <option>1</option>
    </select>
    <input type="button" onclick="notNullCheck()" value="notnullcheck">
    </body>
    </html>
    那个顺序不对  这样试试