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

￡神魔★判官ぃ 2023-01-17 12:52 191阅读 0赞

## 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**

**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)
    }