SOURCE

    var newsletter = $("#newsletter");
    // 问卷调查是否被选中
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // 点击问卷调查执行
    newsletter.click(function () {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });

    $.validator.addMethod("usernameExp", function(value, element,param) {
        var pattern = /^[a-zA-Z0-9_-]{4,16}$/;
        if(pattern.test(value)){
            return true;
        }else{
            return false;
        }
    });


    $("#signupForm").validate({
        //开启调试模式，不会提交表单
        debug:false,
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                usernameExp:true
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "请输入名字",
            lastname: "请输入姓氏",
            username: {
                required: "请输入用户名",
                usernameExp: "用户名需要4~16位字母数字",
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于5"
            },
            confirm_password: {
                required: "请确认密码",
                minlength: "密码长度不能小于5",
                equalTo: "密码不一致"
            },
            email: "请输入邮箱",
            agree: "请先通过协议",
            topic: "至少选择两项"
        },
        //包裹错误信息的标签
        errorElement: "i",
        //包裹错误信息的标签
        errorClass:'error',
        /**
         * 自定义错误信息的显示位置
         * @param error 创建的错误标签 （jquery对象）
         * @param element 当前验证的表单对象 （jquery对象）
         */
        errorPlacement: function (error, element) {

            // 添加`help-block`类给包裹错误信息jquery对象
            error.addClass("help-block");
            // 这里可以根据不同的表单类型甚至是具体的表单字段自定义错误信息的相关属性
            if (element.prop("type") === "checkbox") {
                if(element.prop('name') === 'topic'){
                    error.insertAfter(newsletter.parent());
                    newsletter.parents('.checkbox').parent().addClass("has-feedback");
                }else{
                    error.insertAfter(element.parent());
                    element.parents('.checkbox').parent().addClass("has-feedback");
                }
            } else {
                // 添加`has-feedback`类给 验证元素 外层的父元素，
                element.parent().addClass("has-feedback");
                error.insertAfter(element);
                // 添加图标样式
                if (!element.next("span")[0]) {
                    $("<span class='glyphicon glyphicon-remove form-control-feedback'></span>").insertAfter(element);
                }
            }
        },
        /**
         * 表单验证成功
         * @param label  包裹错误信息的 jQuery对象
         * @param element 当前验证表单的dom对象
         */
        success: function(label,element) {
            // 同unhighlight属性方法
            if($(element).prop('name')==='topic'){
                newsletter.parents('.form-group').addClass("has-success").removeClass("has-error");
                newsletter.next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
            }else{
                $(element).parents('.form-group').addClass("has-success").removeClass("has-error");
                $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
            }
        },
        /**
         * 验证失败表单
         * @param element 验证的DOM元素
         * @param errorClass errorClass属性设置的值
         * @param validClass validClass属性设置的值
         */
        highlight: function (element, errorClass, validClass) {
            if($(element).prop('name')==='topic'){
                newsletter.parents('.form-group').addClass("has-error").removeClass("has-success");
                newsletter.next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
                newsletter.parent().find('.'+errorClass).addClass("help-block");
            }else{
                $(element).parents('.form-group').addClass("has-error").removeClass("has-success");
                $(element).next("span").addClass("glyphicon-remove").removeClass("glyphicon-ok");
                $(element).parent().find('.'+errorClass).addClass("help-block");
            }
        },
        /**
         * 验证失败的表单重新验证成功后执行
         * @param element 验证的DOM元素
         * @param errorClass errorClass属性设置的值
         * @param validClass validClass属性设置的值
         */
        unhighlight: function (element, errorClass, validClass) {
            // 同success属性方法
            if($(element).prop('name')==='topic'){
                newsletter.parents('.form-group').addClass("has-success").removeClass("has-error");
                newsletter.next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
                newsletter.parent().find('.'+errorClass).removeClass("help-block");
            }else{
                $(element).parents('.form-group').addClass("has-success").removeClass("has-error");
                $(element).next("span").addClass("glyphicon-ok").removeClass("glyphicon-remove");
                $(element).parent().find('.'+errorClass).removeClass("help-block");
            }
        },
        /**
         * 提交表单时，验证未通过执行
         * @param event 事件对象
         * @param validator 当前表单的验证程序实例。
         */
        invalidHandler:function(event, validator){
            for (var key in validator.errorMap){
                console.log( validator.errorMap[key]);
                break
            }
        },
        /**
         * 验证成功，提交表单回调
         * @param form form对象（Element）
         * @param event 事件对象
         */
        submitHandler: function (form,event) {
            alert('验证通过');
            //这里写你的代码
        }
    });

<div class="container">
  <form class="form-horizontal" id="signupForm" method="get" action="">
    <fieldset>
      <fieldset>
        <legend>
          表单验证案例
        </legend>
        <div class="form-group form-group-sm">
          <label for="firstname" class="col-sm-2 control-label">
            名字：
          </label>
          <div class="col-sm-10">
            <input class="form-control" id="firstname" name="firstname" type="text">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="lastname" class="col-sm-2 control-label">
            姓氏：
          </label>
          <div class="col-sm-10">
            <input class="form-control" id="lastname" name="lastname" type="text">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="username" class="col-sm-2 control-label">
            用户名：
          </label>
          <div class="col-sm-10">
            <input id="username" class="form-control" name="username" type="text">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="password" class="col-sm-2 control-label">
            密码：
          </label>
          <div class="col-sm-10">
            <input class="form-control" id="password" name="password" type="password">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="confirm_password" class="col-sm-2 control-label">
            重复密码：
          </label>
          <div class="col-sm-10">
            <input class="form-control" id="confirm_password" name="confirm_password"
            type="password">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <label for="email" class="col-sm-2 control-label">
            邮箱：
          </label>
          <div class="col-sm-10">
            <input class="form-control" id="email" name="email" type="email">
          </div>
        </div>
        <div class="form-group form-group-sm">
          <div class="checkbox">
            <label for="agree">
              <input type="checkbox" id="agree" name="agree">
              同意协议
            </label>
          </div>
        </div>
        <div class="form-group form-group-sm">
          <div class="checkbox">
            <label for="newsletter">
              <input type="checkbox" id="newsletter" name="newsletter">
              我愿意接受调查问卷
            </label>
          </div>
        </div>
        <fieldset id="newsletter_topics">
          <legend>
            问卷调查
          </legend>
          <div class="form-group form-group-sm">
            <div class="checkbox">
              <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">
                你是一个开朗的人吗
              </label>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="checkbox">
              <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">
                你每天都会对别人发脾气吗
              </label>
            </div>
          </div>
          <div class="form-group form-group-sm">
            <div class="checkbox">
              <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic">
                你会一个人去看电影吗
              </label>
            </div>
          </div>
        </fieldset>
        <p>
          <input class="btn btn-primary" type="submit" value="提交">
        </p>
      </fieldset>
    </fieldset>
  </form>
</div>

 .gray {
   color: gray;
 }