bootstrapValidator 校验表单提示错误信息及请求校验

bootstrapValidator 校验表单提示错误信息及请求校验

清除表单校验需要放在关闭弹窗的方法中，如果放在初始化的时候，可能会失败

清除校验的两种方法：
 1. $('#xqfk_form').bootstrapValidator('resetForm', true);
 2. $("#xqfk_form").data('bootstrapValidator').resetForm();
表单置空的两种方法：
 1.  $('.xqfk_con input').val('')
 	 $('.xqfk_con textarea').val('')
 2.  $("#xqfk_form")[0].reset();

html

 <form id="xqfk_form">
            <div class="form-group xqfk_d">
              <label for="username" class="xqfk_label"><span>*</span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
              <input type="text" name="username" id="username" placeholder="请输入您的姓名">
            </div>
            <div class="form-group xqfk_d">
              <label for="phone" class="xqfk_label"><span>*</span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</label>
              <input type="text" name="phone" id="phone" placeholder="请输入您的电话">
            </div>
            <div class="form-group xqfk_d">
              <label for="dept" class="xqfk_label">单位/部门：</label>
              <input type="text" id="dept" placeholder="请输入您的单位/部门">
            </div>
            <div class="form-group xqfk_d">
              <label for="desc" class="xqfk_label xqfx_lab"><span>*</span>需求描述：</label>
              <textarea type="text" name="desc" id="desc" placeholder="请描述您的需求" rows="7">
              </textarea>
            </div>
            <div class="xqfk_btn">
              <!-- οnclick="xqfkSend()" -->
              <button type="submit" name="submit">发送</button>
              <div class="xqfkclose"  id="xqfkclose" onclick="xqfkDiaClo()">结束</div>
            </div>
          </form>

js

// 需求反馈 表单校验
$(function () {
  $('#xqfk_form').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      username: {
        message: '用户名验证失败',
        validators: {
          notEmpty: {
            message: '姓名不能为空'
          },
          regexp: {
            regexp: /^[\u4e00-\u9fa5]{2,4}$/,
            message: '只能输入汉字，长度在 2 到 4 个字符',
          },
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: '电话不能为空'
          },
          regexp: {
            regexp: /^1\d{10}$/ ,
            message: '请输入正确的手机号'
          },
        }
      },
      desc:{
        validators: {
          notEmpty: {
            message: '需求描述不能为空'
          },
        }
      }
    },
    submitHandler: function (validator, form, submitButton) {
      $("#xqfk_form").data('bootstrapValidator').resetForm()
    }
  });
  $('#xqfk_form').on('success.form.bv', function(e) {
    e.preventDefault();//取消submit默认提交效果
    $("#xqfk_form")[0].reset();//重置表单，此处用jquery获取Dom节点时一定要加[0]
    $("#xqfk_form").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
    $("#xqfk_dia").hide();
    // toastr.success("创建服务器成功", "成功提示");
  });
});

// esc键关闭弹窗
$(document).keyup(function(e){
  var key =  e.which;
  if(key == 27){
  	//清除校验
    $('#xqfk_form').bootstrapValidator('resetForm', true);
    // $("#xqfk_form").data('bootstrapValidator').resetForm();
    $("#xqfk_dia").fadeOut(200)
    $("#xaizsk_dia").fadeOut(200)
  }
});

// 打开弹窗时置空
function xqfkDia() {
  $("#xaizsk_dia").hide()
  $('.xqfk_con input').val('')
  $('.xqfk_con textarea').val('')
  $("#xqfk_dia").fadeIn(200)
}

// 关闭弹窗
function xqfkDiaClo() {
	//表单置空
  $("#xqfk_form")[0].reset();
	//清除校验
  $('#xqfk_form').bootstrapValidator('resetForm', true);
  // $("#xqfk_form").data('bootstrapValidator').resetForm();
  $("#xqfk_dia").fadeOut(200)
}