js和jQuery分别实现 单选框、复选框、下拉列表的表单验证

关于页面表单验证:一些简单的理解

单选框/复选框：

js代码：

$(function () {
    $("#Button").click(function () {
        var love = document.getElementsByName("love");
        for(var i = 0; i<love.length;i++){
            if(love[i].checked == true){
                return true;
            }else{
                alert("爱好这一项您没选择")
                return false;
            }
        }

        return true;
    })

jQuery代码：

第一种方法：

$(function () {
    $("#Button").click(function () {
        if($(":checkbox:checked").length == 0){
            alert("爱好这一项您没选择");
            return false;
        }
        return true;
    })
})

第二种方法：

注：prop方法在jQuery 1.11.0及以下有效

//单击商品下面的复选框
$(".price input[name='zuhe']").click(function () {
        if($(this).prop("checked")){
            
        }else{
            
        }
})

html部分代码：

<dl>
 <dt>爱好：</dt>
 <dd>
    <label>
       <input type="checkbox" id="checkbox" value="checkbox" name="love"/>
    </label>
    运动&nbsp;&nbsp;
    <label>
       <input type="checkbox" id="checkbox2" value="checkbox" name="love"/>
    </label>
    聊天&nbsp;&nbsp;
    <label>
       <input type="checkbox" id="checkbox3" value="checkbox" name="love"/>
    </label>
    玩游戏
 </dd>
</dl>

下拉列表：

js代码：

var optionNUM = document.getElementsByTagName("option");
var options ="";
if(optionNUM != null){
    for(var i=0;i<optionNUM.length;i++){
        if(optionNUM[i].selected){
            options = optionNUM[i].innerHTML ;
            break;
        }
    }
}else{
    alert("未选择板块");
}

jQuery代码：

if($("select").val() ==""){
    alert("未选择板块");
    return false;
}else{
    alert($("select").val());
    var options = $("select").val();
    return true;
}

html代码：

<div class="post" >
    所属版块：<select><option></option><option>请选择版块</option><option>JAVA课程</option><option>历史文化</option><option>新手报到</option><option>职业规划</option></select>
    <textarea class="content" value="请在此输入内容" id="textID"></textarea>
    <input class="btn" value="发布" οnclick="release()">
</div>