jQuery 表单验证插件formValidation实现个性化错误提示

通过引入jQuery表单验证插件formValidation，我们可以在项目中轻松实现表单验证功能，并且可以根据个人需求进行自定制的错误提示。下面是实现该功能的完整攻略：

设置和引入jQuery表单验证插件formValidation

1. 首先需要将jQuery库和formValidation文件引入到项目中，代码如下：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

1. 接下来，我们在HTML表单中添加需要验证的input标签并设置相应的name和data规则，例如：

<form id="myForm">
  <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control" name="name" data-fv-notempty="true" data-fv-stringlength="true" data-fv-stringlength-min="3" />
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="email" class="form-control" name="email" data-fv-notempty="true" data-fv-emailaddress="true" />
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" name="password" data-fv-notempty="true" data-fv-stringlength="true" data-fv-stringlength-min="6" />
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

1. 最后，在JavaScript文件中引入formValidation插件，设置自定义错误提示，并初始化表单，代码如下：

$(document).ready(function() {
  $('#myForm').formValidation({
    framework: 'bootstrap',
    err: {
      container: 'tooltip'
    },
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      name: {
        validators: {
          notEmpty: {
            message: '请输入姓名'
          },
          stringLength: {
            min: 3,
            message: '姓名至少为3个字符'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: '请输入邮箱地址'
          },
          emailAddress: {
            message: '邮箱地址格式有误'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '请输入密码'
          },
          stringLength: {
            min: 6,
            message: '密码至少为6个字符'
          }
        }
      }
    }
  });
});

在上述代码中，我们首先设置了基于bootstrap框架的表单验证插件，然后设置了错误提示的容器类型为tooltip。接着，我们设置了表单验证成功和失败的图标，并根据需要设置了各个input标签的验证规则及自定义错误提示信息。最后，我们在文档加载完成后调用了formValidation插件的初始化方法。

自定义错误提示的实例说明

1. 修改错误提示的样式

我们可以通过修改.err样式来自定义错误提示的样式，例如：

.err { 
  color: red;
  font-size: 12px;
}

这样一来，原本的用户无法直观理解的tooltip错误提示，就会变成我们定义的红色小字体错误文本。

1. 基于插件显示错误提示

我们可以通过插件提供的方法来获取和显示指定input标签的错误信息，例如：

var fv = $('#myForm').data('formValidation');
var errors = fv.getInvalidFields();
for (var i = 0; i < errors.length; i++) {
  var $field = $(errors[i]);
  var message = fv.getOptions($field.attr('name')).err.get(errors[i]);
  $field.popover({
    content: message,
    container: 'body',
    placement: 'top'
  }).popover('show');
}

在上述代码中，我们首先获取了表单的formValidation实例对象，然后使用该实例对象的getInvalidFields方法获取了所有验证失败的input标签。接着，我们对这些错误的input标签进行遍历，并通过fv.getOptions方法获取了其错误信息并显示在popover中。这样一来，我们就可以使用插件提供的方法自定义错误提示的显示效果和方式。

以上便是“jQuery表单验证插件formValidation实现个性化错误提示”的完整攻略，相信已经能够让你轻松实现表单验证并进行个性化错误提示了。