1. Python技术站首页
  2. 其他
  3. JavaScript

Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

• JavaScript
yizhihongxing

讲解BootstrapValidator校验、校验清除重置的实现代码需要以下步骤：

1. 引入BootstrapValidator插件库

在HTML文档中，需要先引入BootstrapValidator的插件库，如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

其中，第一行引入的是Bootstrap的CSS样式表文件。第二行引入的是BootstrapValidator的CSS样式表文件。第三行引入的是Bootstrap的JS脚本文件。第四行引入的是BootstrapValidator的JS脚本文件。

2. 编写HTML表单

在HTML文档中，需要编写需要验证的表单，如下所示：

<form id="myForm">
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" class="form-control" name="username" required>
  </div>
  <div class="form-group">
    <label>密码：</label>
    <input type="password" class="form-control" name="password" required>
  </div>
  <button type="button" class="btn btn-primary" id="validateBtn">校验</button>
  <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>
  <button type="button" class="btn btn-secondary" id="clearBtn">清除</button>
</form>

以上代码片段中的表单包含两个文本框和三个按钮，通过name属性可以定义需要验证的表单项。

3. 编写校验规则

在JS脚本中，需要编写校验规则，如下所示：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      username: {
        message: '用户名无效',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 3,
            max: 10,
            message: '用户名长度必须在3到10个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含大小写字母、数字和下划线'
          }
        }
      },
      password: {
        message: '密码无效',
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: '密码长度必须在6到30个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_@#$%]+$/,
            message: '密码只能包含大小写字母、数字和@#$%特殊字符'
          }
        }
      }
    }
  });
});

以上代码片段中，通过$(function() {})定义了当DOM ready的时候执行的函数。这个函数内部，$("#myForm")表示选中ID为myForm的表单，通过bootstrapValidator({})方法设置了该表单需要遵循的校验规则。在fields属性中，需要设置每个表单项的校验规则。

4. 添加校验、清除和重置事件

在JS脚本中，我们需要添加校验、清除和重置事件，如下所示：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      username: {
        message: '用户名无效',
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 3,
            max: 10,
            message: '用户名长度必须在3到10个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_]+$/,
            message: '用户名只能包含大小写字母、数字和下划线'
          }
        }
      },
      password: {
        message: '密码无效',
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: '密码长度必须在6到30个字符之间'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9_@#$%]+$/,
            message: '密码只能包含大小写字母、数字和@#$%特殊字符'
          }
        }
      }
    }
  });

  $("#validateBtn").click(function() {
    $("#myForm").bootstrapValidator('validate');
  });

  $("#resetBtn").click(function() {
    $("#myForm").data('bootstrapValidator').resetForm(true);
  });

  $("#clearBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

以上代码片段中，通过$("#validateBtn").click()来绑定校验按钮的点击事件。这样点击校验按钮时，就会自动调用$("#myForm").bootstrapValidator('validate')来进行校验。

通过$("#resetBtn").click()来绑定重置按钮的点击事件。这样点击重置按钮时，就会自动调用$("#myForm").data('bootstrapValidator').resetForm(true)来重置表单。

通过$("#clearBtn").click()来绑定清除按钮的点击事件。这样点击清除按钮时，就会自动调用$("#myForm")[0].reset()来清除表单中的内容。

以上就是BootstrapValidator校验、校验清除和重置的实现方式。下面给出两个简单的示例：

示例一：必填项校验

HTML代码：

<form id="myForm">
  <div class="form-group">
    <label>姓名：</label>
    <input type="text" class="form-control" name="name" required>
  </div>
  <div class="form-group">
    <label>年龄：</label>
    <input type="number" class="form-control" name="age" required>
  </div>
  <button type="button" class="btn btn-primary" id="validateBtn">校验</button>
  <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>
  <button type="button" class="btn btn-secondary" id="clearBtn">清除</button>
</form>

JS代码：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      name: {
        message: '姓名无效',
        validators: {
          notEmpty: {
            message: '姓名不能为空'
          }
        }
      },
      age: {
        message: '年龄无效',
        validators: {
          notEmpty: {
            message: '年龄不能为空'
          }
        }
      }
    }
  });

  $("#validateBtn").click(function() {
    $("#myForm").bootstrapValidator('validate');
  });

  $("#resetBtn").click(function() {
    $("#myForm").data('bootstrapValidator').resetForm(true);
  });

  $("#clearBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

示例二：手机号码校验

HTML代码：

<form id="myForm">
  <div class="form-group">
    <label>手机号码：</label>
    <input type="tel" class="form-control" name="phone" required>
  </div>
  <button type="button" class="btn btn-primary" id="validateBtn">校验</button>
  <button type="button" class="btn btn-secondary" id="resetBtn">重置</button>
  <button type="button" class="btn btn-secondary" id="clearBtn">清除</button>
</form>

JS代码：

$(function() {
  $("#myForm").bootstrapValidator({
    message: '该值无效',
    fields: {
      phone: {
        message: '手机号码无效',
        validators: {
          notEmpty: {
            message: '手机号码不能为空'
          },
          regexp: {
            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
            message: '手机号码格式不正确'
          }
        }
      }
    }
  });

  $("#validateBtn").click(function() {
    $("#myForm").bootstrapValidator('validate');
  });

  $("#resetBtn").click(function() {
    $("#myForm").data('bootstrapValidator').resetForm(true);
  });

  $("#clearBtn").click(function() {
    $("#myForm")[0].reset();
  });
});

以上就是BootstrapValidator校验、校验清除和重置的实现方式的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrapvalidator校验、校验清除重置的实现代码(推荐) - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 解决微信二次分享不显示摘要和图片的问题

    让微信二次分享能够正确显示摘要和图片，需要在网页head部分添加相关的meta标签。以下是具体的步骤： 在head部分添加以下meta标签： <meta property="og:title" content="网页标题"/> <meta property="og:description&q…

    JavaScript 2023年6月11日
    00

  • 使用js dom和jquery分别实现简单增删改

    下面我来详细讲解使用JS DOM和jQuery分别实现简单增删改的完整攻略。 使用JS DOM实现简单增删改 首先我们需要明确一下，JS DOM是指通过JavaScript来操作DOM元素，实现交互效果的一种技术。下面是详细的步骤： 添加元素 首先，我们需要一个按钮，并绑定一个事件，当用户点击按钮时会自动创建一个新的元素。具体代码如下： <!DOCTY…

    JavaScript 2023年6月10日
    00

  • JS封装cavans多种滤镜组件

    JS封装Cavans多种滤镜组件攻略 在本攻略中，我们将讲解如何通过JavaScript来实现对Cavans多种滤镜的封装。主要囊括了以下内容： 需求分析 功能实现 示例代码 需求分析 我们需要实现一个Cavans滤镜的组件，具有以下功能： 支持黑白滤镜效果 支持模糊滤镜效果 支持浮雕滤镜效果 支持自定义滤镜效果 功能实现 1. 创建Canvas对象 var…

    JavaScript 2023年6月10日
    00

  • JS实现将数据导出到Excel的方法详解

    下面是“JS实现将数据导出到Excel的方法详解”的完整攻略。 一、介绍 在开发过程中，我们经常需要将数据导出到Excel，并进一步进行处理或者查看。有多种方法可以实现数据导出到Excel，其中一种常用的方法就是使用JavaScript。JavaScript可以生成表格，并将其转化为Excel文件，然后自动下载到本地。本文将分步讲解如何使用JavaScrip…

    JavaScript 2023年5月19日
    00

  • javascript时间自动刷新实现原理与步骤

    JavaScript 时间自动刷新实现主要是通过不断更新页面上显示的日期和时间来实现，其实现步骤主要包括以下几步： 创建用于显示时间的 HTML 元素。可以使用 p 或 span 等标签，例如： <p id="time"></p> 创建用于更新时间的 JavaScript 函数。该函数需要通过定时器来不断更新时间，…

    JavaScript 2023年5月27日
    00

  • 统一接口：为FireFox添加IE的方法和属性的js代码

    为Firefox浏览器添加IE的方法和属性的js代码，需要使用jQuery以及XMLHttpRequest对象来实现。 以下是添加IE方法的代码： // 为IE的String对象添加contains方法 if (!String.prototype.contains) { String.prototype.contains = function(str, st…

    JavaScript 2023年6月10日
    00

  • javascript中setAttribute兼容性用法分析

    下面是“javascript中setAttribute兼容性用法分析”的完整攻略： 1. 什么是setAttribute方法？ 在javascript中，设置元素属性有几种方法，其中之一是“setAttribute”方法。setAttribute()方法是Element对象的方法之一，用于设置给定元素的属性的值。它有两个参数：属性名称和属性值。使用setAt…

    JavaScript 2023年5月28日
    00

  • JavaScript阻止表单提交方法（附代码）

    下面是详细讲解JavaScript阻止表单提交方法的完整攻略。 文章目录 为什么需要阻止表单提交？ 阻止表单默认行为的方法 jQuery实现方法 原生JavaScript实现方法 如何测试表单是否成功被阻止？ 总结 为什么需要阻止表单提交？ 在网页应用中，表单是极其重要的组件之一。但在表单提交时，可能会出现一些问题，例如： 用户没有填写必填字段或填写格式错误…

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