js 检验(input、radio、checkbox、textarea)必填项的代码

发布时间:2019-08-16编辑:脚本学堂
本文介绍下,用于检测页面中input、radio、checkbox、textarea等必填项的一段js代码,有需要的朋友参考下。

在网页中经常需要限制某些表单项是必填项,此时就需要借助js脚本来检测。

以下代码,可以完成input、radio、checkbox、textarea等的必填属性检测。

代码:

<script language="javascript">
//检查必填字段  
//(校验必填项不能为空(包括input框,单选框,复选框,文本域))  
var elem = document.getElementById("age");  
function checkRequired(elem){  
        var name = elem.name;  
        if(elem.type == "checkbox" || elem.type == "radio"){  
            var results=[];  
            results.numChecked = 0;  
            var input = document.getElementsByTagName("input");  
            for(var i=0;i<input.length;i++){  
                if(input[i].name == name){  
                    results.push(input[i]);  
                    if(input[i].checked){  
                        results.numChecked++;  
                    }  
                }  
            }  
            return results.numChecked;  
          
        }else{   
            return elem.value.length > 0 && elem.value != elem.defaultValue;  
        }  
    }
//检查输入元素是否键入了信息的通用函数  
function checkRequired(elem){  
    if(elem.type == "checkbox" || elem.type == "radio")  
        return getInputsByName(elem.name).numChecked;  
    else   
        return elem.value.length > 0 && elem.value != elem.defaultValue;  
}  
//找出指定name的所有input元素(对查找 以及处理复选框或单选框十分有用)  
function getInputsByName(name){  
    var results=[];  
    results.numChecked = 0;  
    var input = document.getElementsByTagName("input");  
    for(var i=0;i<input.length;i++){  
        if(input[i].name == name){  
            results.push(input[i]);  
            if(input[i].checked){  
                results.numChecked++;  
            }
        }
    }
    return results;  
}
  
window.onload = function(){  
    document.getElementsByTagName("form")[0].onsubmit=function(){  
        var elem = document.getElementById("age");  
        if(!checkRequired(elem)){  
            alert("Required field is empty "+"you must be over 13 to use this site.");  
            return false;  
        }
        var elem = document.getElementById("name");  
        if(!checkRequired(elem)){  
            alert("Required field is empty - please provide ");  
            return false;  
        }
    };
};
</script>

您可能感兴趣的文章:
JS验证radio和checkbox是否选中
js判断单选框(radio)是否被选中的例子
js判断radio是否被选中的简单例子
JS动态判断radio是否选中的方法
radio和checkbox及php select默认选择的实现代码
js实现radio和select的默认选中
radio实现checkbox效果 再次点击取消选择