bootstrapValidator 校验实践

$(function () {

   $("#addLiveStreamingBtn").bind("click",function(){
      $('#addLiveForm').data('bootstrapValidator').validate();//启用验证
      if(!$('#addLiveForm').data('bootstrapValidator').isValid()){
         return;
      }
      $("#addLiveForm").ajaxSubmit({
         type: 'POST',
         url: '/ope/live/list.addOrUpdate',
         success: function (data) {
            var data = $.parseJSON(data);
            if(data.code==200){
               window.location.href="/ope/live/list";
            }else{
               toastr.error(data.msg);
            }
         },
         error: function () {
            toastr.error("失败，请检查网络后重试");
         }
      });
   })

   Validators();


})

function Validators(){
   $("#addLiveForm").bootstrapValidator({
      message: 'This value is not valid',
      excluded: [':disabled'],
      submitButtons: '#addLiveStreamingBtn',
      feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
         title:{
            validators:{
               notEmpty: {
                  message: '直播标题不能为空'
               },
               stringLength : {
                  min : 1,
                  max : 13,
                  message : '长度1-13位字符'
               }
            }
         },
         streamingUrl:{
            validators:{
               notEmpty: {
                  message: '直播链接不能为空'
               },
               stringLength : {
                  min : 1,
                  max : 100,
                  message : '长度1-100位字符'
               }
            }
         },
         streamerNickName:{
            validators:{
               notEmpty: {
                  message: '主播昵称不能为空'
               },
               stringLength : {
                  min : 1,
                  max : 10,
                  message : '长度1-10位字符'
               }
            }
         },
         streamerFollow:{
            validators:{
               notEmpty: {
                  message: '跟播不能为空'
               },
               stringLength : {
                  min : 1,
                  max : 10,
                  message : '长度1-10位字符'
               }
            }
         },
         noticeText:{
            validators:{
               notEmpty: {
                  message: '预约提醒消息内容不能为空'
               },
               stringLength : {
                  min : 1,
                  max : 200,
                  message : '长度1-200位字符'
               }
            }
         },
         bigStreamingImgUrl:{
            trigger:"change",
            validators:{
               notEmpty: {
                  message: '直播图片不能为空'
               }
            }
         },
         streamerHeadImg:{
            trigger:"change",
            validators:{
               notEmpty: {
                  message: '主播头像不能为空'
               }
            }
         },
         startTimeStr:{
            trigger:'change',
            validators:{
               notEmpty: {
                  message: '直播开始时间不能为空'
               },
                    callback: {
                        message: '开始日期不能大于结束日期',
                        callback:function(value, validator,$field){
                            var other = validator.getFieldElements('endTimeStr').val();//获得另一个的值
                            if(!other){
                                return true;
                            }
                            var end = new Date(other.replace("-", "/").replace("-", "/"));
                            var start = new Date(value.replace("-", "/").replace("-", "/"));
                            if (start <= end) {
                                //$('#endTimeStr').change();
                        validator.resetField("endTimeStr",false);
                                return true;
                            }
                            return false;
                        }
                    }
            }
         },
         endTimeStr:{
            trigger:'change',
            validators:{
               notEmpty: {
                  message: '直播结束时间不能为空'
               },
                    callback: {
                        message: '结束日期不能小于开始日期',
                        callback:function(value, validator,$field){
                            var other = validator.getFieldElements('startTimeStr').val();//获得另一个的值
                            if(!other){
                                return true;
                            }
                            var start = new Date(other.replace("-", "/").replace("-", "/"));
                            var end = new Date(value.replace("-", "/").replace("-", "/"));
                            if (start <= end) {
                                // $('#startTimeStr').change();
                        validator.resetField("startTimeStr",false);//重置字段验证状态 如果为true重置字段值
                                return true;
                            }
                            return false;
                        }
                    }
            }
         },
         picUrl:{
            validators:{
               notEmpty: {
                  message: '必须输入或者必须选择'
               }
            }
         }
      }
   });
}



var date = new Date();
date.setMinutes(date.getMinutes()+10);
$('.form_datetime').datetimepicker({
    minView: "hour", //选择日期后，不会再跳转去选择时分秒 
    language:  'zh-CN',
    format: 'yyyy-mm-dd hh:ii:00',
    todayBtn:  1,
    autoclose: true,
   startView : 2,
   minView : 0,
   maxView : 5,
   hourStep: 1,
   minuteStep : 1,
    startDate:date,
   secondStep : 1
});

/**
 * 图片格式大小校验
 */
function imgValidator(file){
    var arr = new Array();
    var imgPath = $(file).val();
    arr = imgPath.split(".");
    var imgSuffix = arr[arr.length-1];
    if(imgSuffix != 'jpg'){
        toastr.error("仅支持jpg图片格式");
        return false;
    }

    fileSize = file.files[0].size / 1024;
    if (fileSize > 20000) {
        toastr.error("图片大小不能超过20M");
        return false;
    }
    return true;
}


</script>