使用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.jsbootstrap.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技术站

(0)
上一篇 2023年5月19日
下一篇 2023年5月19日

相关文章

  • JavaScript节点的增删改查深入学习

    JavaScript节点的增删改查深入学习 本文将详细讲解JavaScript中节点的增删改查操作,内容包括选择节点、创建节点、修改节点和删除节点。在讲解过程中,我们将使用两个示例进行说明。 一、选择节点 在JavaScript中选择节点可以使用 document.querySelector() 和 document.querySelectorAll() 方…

    JavaScript 2023年6月10日
    00
  • JavaScript中如何对多维数组(矩阵)去重的实现

    JavaScript中对多维数组(矩阵)去重的实现,可以使用Set数据结构和Array.prototype.map方法相结合实现。相比遍历数组并用indexOf方法实现数组去重,Set结构和map方法的效率更高。下面是实现的步骤: 将多维数组转换成一维数组 let arr = [ [1, 2, 3], [2, 3, 4], [3, 4, 5] ]; let …

    JavaScript 2023年5月27日
    00
  • 如何通过JS实现转码与解码

    下面是如何通过JS实现转码与解码的完整攻略: 一、什么是转码与解码? 在计算机领域,转码与解码是非常重要的概念。转码是将一种编码方式的数据转换为另一种编码方式的数据,而解码则是将编码后的数据转换为原始数据。在日常编程中,常常会用到转码与解码,比如在处理网络传输、数据存储、文本处理等方面。 二、在JS中如何进行转码与解码? 在JS中,可以通过内置的一些方法来实…

    JavaScript 2023年5月20日
    00
  • javascript中数组与对象的使用方法区别

    JavaScript 中数组和对象都是非常重要的数据类型,它们在编程中有着非常广泛和重要的应用。接下来,我将为您讲解 JavaScript 中数组与对象的使用方法区别,以及它们的应用。我将分以下三个部分详细讲解。 定义和声明 在JavaScript中,定义数组使用方括号[],例如: let arr = [1, 2, 3]; 而定义对象使用大括号{},例如: …

    JavaScript 2023年5月27日
    00
  • javascript实现的时间格式加8小时功能示例

    下面是关于“JavaScript实现的时间格式加8小时功能”的详细讲解攻略。 1. 原理简介 JavaScript实现的时间格式加8小时功能,其原理就是将当前的时间戳加上8小时的时差,然后再将其格式化为我们需要的时间格式。 在JavaScript中,我们可以使用new Date()创建一个当前时间的Date对象,可以使用getTime()获取Date对象对应…

    JavaScript 2023年5月27日
    00
  • vue-cli4项目开启eslint保存时自动格式问题

    下面是“vue-cli4项目开启eslint保存时自动格式问题”的完整攻略。 1. 安装必要依赖 首先,我们需要安装一些必要的依赖,以支持Eslint的自动格式化功能。具体操作如下: 安装Eslint相关依赖 npm install eslint –save-dev npm install eslint-plugin-vue –save-dev npm …

    JavaScript 2023年6月10日
    00
  • element中form组件prop嵌套属性的问题解决

    当我们在使用element组件库的form组件进行表单处理时,可能会遇到prop属性中需要嵌套传递另一个属性值的情况。比如,我们需要将一个表单项的验证规则(rules)传递给另外一个表单项,例如两个密码输入框输入必须相同。 以下是解决此类问题的攻略: 步骤一:在模板中添加ref属性 在模板中,我们需要添加一个ref属性来标识这个表单项,这样我们在代码中就可以…

    JavaScript 2023年6月10日
    00
  • javascript执行上下文详解

    JavaScript 执行上下文详解 JavaScript(以下简称 JS)是一种运行在浏览器中的编程语言,它常常被用来实现交互性和动画效果。理解 JavaScript 的执行上下文对于掌握 JS 编程至关重要,这篇文章将为你详细讲解 JS 执行上下文的工作原理及其相关的知识点。 JS 执行上下文 JS 执行上下文是在代码执行时,JavaScript 引擎所…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部