使用bootstrapValidator插件进行动态添加表单元素并校验

让我来为您详细讲解如何使用bootstrapValidator插件进行动态添加表单元素并校验。

1、bootstrapValidator简介

bootstrapValidator是一个基于Bootstrap的优秀表单验证插件，支持表单的实时验证和AJAX提交，提供多种验证方式，例如：必填、长度、邮箱、手机、网址等。

2、动态添加表单元素

当我们需要动态地添加表单元素时，可以使用jquery的append()方法在表单中添加新的html元素。

例如，在页面上添加一个按钮，点击按钮可以动态地在表单中添加一个文本框：

<form id="myForm">
  <div class="form-group">
    <label>姓名：</label>
    <input type="text" name="name" class="form-control" />
  </div>
  <div class="form-group">
    <label>年龄：</label>
    <input type="text" name="age" class="form-control" />
  </div>
  <div class="form-group" id="add">
    <button type="button" class="btn btn-primary">添加其它信息</button>
  </div>
</form>

$(function () {
  $('#add').click(function () {
    $('#myForm').append('<div class="form-group"><label>城市：</label><input type="text" name="city" class="form-control"></div>');
  })
});

3、使用bootstrapValidator校验动态添加的表单元素

当我们动态地添加了表单元素后，需要对这些新添加的元素进行校验，可以通过bootstrapValidator的addField()和removeField()方法来实现。

例如，在上述的动态添加表单元素的示例中，我们需要对新添加的城市文本框进行校验，可以按照以下步骤进行：

首先，在页面中引入bootstrap-validator.min.js和bootstrap.min.css文件。

然后，在表单元素动态添加的jquery代码中，加入校验代码：

$(function () {
  $('#add').click(function () {
    $('#myForm').append('<div class="form-group"><label>城市：</label><input type="text" name="city" class="form-control"></div>');
    $('#myForm').bootstrapValidator('addField', 'city', {
      validators: {
        notEmpty: {
          message: '城市不能为空'
        },
        stringLength: {
          min: 2,
          max: 10,
          message: '城市长度必须在2到10之间'
        }
      }
    });
  })
});

这里我们使用了addField()方法给动态添加的城市文本框添加了校验规则。具体来说，我们为城市文本框添加了非空和长度限制校验规则。

如果要移除这个城市文本框的校验规则，可以使用removeField()方法，示例如下：

$(function () {
  $('#add').click(function () {
    $('#myForm').append('<div class="form-group"><label>城市：</label><input type="text" name="city" class="form-control"></div>');
    $('#myForm').bootstrapValidator('addField', 'city', {
      validators: {
        notEmpty: {
          message: '城市不能为空'
        },
        stringLength: {
          min: 2,
          max: 10,
          message: '城市长度必须在2到10之间'
        }
      }
    });
  })
  // 移除城市文本框的校验规则
  $('button#remove').click(function () {
    $('#myForm').bootstrapValidator('removeField', 'city');
    $('#myForm div.form-group:last').remove();
  })
});

这里我们添加了一个按钮，点击该按钮可以移除动态添加的城市文本框及其校验规则。

4、示例

下面为两个示例：

示例一：向表单中动态添加文本框，限制文本框长度在3到8个字符之间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bootstrapValidator示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form id="myForm">
      <div class="form-group">
        <label>用户名：</label>
        <input type="text" name="username" class="form-control" />
      </div>
      <div class="form-group">
        <label>密码：</label>
        <input type="password" name="password" class="form-control" />
      </div>
      <div class="form-group" id="add">
        <button type="button" class="btn btn-primary">添加其它信息</button>
      </div>
      <button type="submit" class="btn btn-success">提交</button>
    </form>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
  <script>
    $(function () {
      $('#myForm').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          username: {
            validators: {
              notEmpty: {
                message: '用户名不能为空'
              }
            }
          },
          password: {
            validators: {
              notEmpty: {
                message: '密码不能为空'
              }
            }
          }
        },
        submitHandler: function (validator, form, submitButton) {
          alert('提交成功');
        },
        onError: function (event, validator) {
          alert('请检查您填写的信息');
        }
      });

      $('#add').click(function () {
        $('#myForm').append('<div class="form-group"><label>其他信息：</label><input type="text" name="other" class="form-control"></div>');
        $('#myForm').bootstrapValidator('addField', 'other', {
          validators: {
            stringLength: {
              min: 3,
              max: 8,
              message: '请输入3-8个字符'
            }
          }
        });
      })
    });
  </script>
</body>
</html>

示例二：向表单中动态添加下拉框，限制下拉框必选

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>bootstrapValidator示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <form id="myForm">
      <div class="form-group">
        <label>姓名：</label>
        <input type="text" name="name" class="form-control" />
      </div>
      <div class="form-group">
        <label>年龄：</label>
        <input type="text" name="age" class="form-control" />
      </div>
      <div class="form-group" id="add">
        <button type="button" class="btn btn-primary">添加其它信息</button>
      </div>
      <button type="submit" class="btn btn-success">提交</button>
    </form>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
  <script>
    $(function () {
      $('#myForm').bootstrapValidator({
        feedbackIcons: {
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
          name: {
            validators: {
              notEmpty: {
                message: '姓名不能为空'
              }
            }
          },
          age: {
            validators: {
              notEmpty: {
                message: '年龄不能为空'
              }
            }
          }
        },
        submitHandler: function (validator, form, submitButton) {
          alert('提交成功');
        },
        onError: function (event, validator) {
          alert('请检查您填写的信息');
        }
      });

      $('#add').click(function () {
        var html = '<div class="form-group">';
        html += '<label>城市：</label>';
        html += '<select name="city" class="form-control">';
        html += '<option value="">请选择城市</option>';
        html += '<option value="北京">北京</option>';
        html += '<option value="上海">上海</option>';
        html += '<option value="广州">广州</option>';
        html += '<option value="深圳">深圳</option>';
        html += '</select>';
        html += '</div>';
        $('#myForm').append(html);
        $('#myForm').bootstrapValidator('addField', 'city', {
          validators: {
            notEmpty: {
              message: '请选择城市'
            }
          }
        });
      })
    });
  </script>
</body>
</html>

以上就是使用bootstrapValidator插件进行动态添加表单元素并校验的完整攻略。希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用bootstrapValidator插件进行动态添加表单元素并校验 - Python技术站