使用BootStrapValidator完成前端输入验证

使用 BootStrapValidator 完成前端输入验证的完整攻略如下:

步骤一:引入 BootStrap 和 BootStrapValidator 库

首先,需要引入 BootStrap 和 BootStrapValidator 两个库:

<!-- BootStrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- BootStrap JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- BootStrapValidator CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">

<!-- BootStrapValidator JavaScript文件 -->
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

步骤二:编写HTML代码

在HTML表单中,给需要验证的表单元素添加相关属性:

<form id="form" class="form-horizontal" method="post" action="#">
  <div class="form-group">
    <label class="col-sm-3 control-label">手机号码:</label>
    <div class="col-sm-5">
      <input type="text" class="form-control" name="phone" placeholder="请输入手机号" data-bv-notempty="true"
             data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"
             data-bv-message="请输入手机号" autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">邮箱地址:</label>
    <div class="col-sm-5">
      <input type="email" class="form-control" name="email" placeholder="请输入邮箱地址" data-bv-notempty="true"
             data-bv-emailaddress="true" data-bv-emailaddress-message="邮箱地址格式不正确" data-bv-message="请输入邮箱地址"
             autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">密码:</label>
    <div class="col-sm-5">
      <input type="password" class="form-control" name="password" placeholder="请输入密码" data-bv-notempty="true"
             data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12" data-bv-message="请输入密码长度为6-12位"
             autocomplete="off">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-5">
      <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
    </div>
  </div>
</form>

步骤三:编写JavaScript代码

在JavaScript中,使用 BootStrapValidator 对表单进行验证:

//表单验证
$('#form').bootstrapValidator({
  //提示图标
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  //指定验证字段
  fields: {
    phone: {
      //验证规则
      validators: {
        notEmpty: {
          message: '手机号码不能为空'
        },
        regexp: {
          regexp: /^1[3456789]\d{9}$/,
          message: '请输入11位手机号码'
        }
      }
    },
    email: {
      //验证规则
      validators: {
        notEmpty: {
          message: '邮箱地址不能为空'
        },
        emailAddress: {
          message: '请输入正确的邮箱地址'
        }
      }
    },
    password: {
      validators: {
        notEmpty: {
          message: '密码不能为空'
        },
        stringLength: {
          min: 6,
          max: 12,
          message: '请输入长度为6-12位的密码'
        }
      }
    }
  }
});

//表单提交
$('#saveBtn').click(function () {
  $('#form').bootstrapValidator('validate');
  if ($('#form').data('bootstrapValidator').isValid()) {
    //表单提交操作
  }
});

示例说明一:手机号码输入验证

<input type="text" class="form-control" name="phone" placeholder="请输入手机号" data-bv-notempty="true"
       data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"
       data-bv-message="请输入手机号" autocomplete="off">

在此示例中,输入框会接受用户输入的手机号码,并在实时输入的同时进行验证。数据验证规则所设置的条件为:

  • 输入不能为空,即设置 data-bv-notempty="true"
  • 手机号码格式必须符合 ^1[3456789]\d{9}$ 的正则表达式,即设置 data-bv-regexp="true" data-bv-regexp-regexp="^1[3456789]\d{9}$" data-bv-regexp-message="手机号码格式不正确"

其中,data-bv-notempty="true" 表示该输入框的输入不能为空,data-bv-regexp="true" 表示需要使用正则表达式进行输入验证, data-bv-regexp-regexp="^1[3456789]\d{9}$" 表示该标签所进行的验证规则为 手机号码格式,至于 data-bv-regexp-message= 则出现在输入框下方的提示信息中。关于这些规则的具体设置,可参考 BootStrapValidator 的官方文档。

示例说明二:密码输入验证

<input type="password" class="form-control" name="password" placeholder="请输入密码" data-bv-notempty="true"
       data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12" data-bv-message="请输入密码长度为6-12位"
       autocomplete="off">

在此示例中,输入框会接受用户输入的密码,并在实时输入的同时进行验证。数据验证规则所设置的条件为:

  • 输入不能为空,即设置 data-bv-notempty="true"
  • 输入密码的长度区间应在 612 的范围内,即设置 data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="12"
  • 密码长度不能超出 6-12 个字符,即设置提示信息为 请输入密码长度为6-12位

至于 data-bv-notempty="true" 的含义则已解释在前面了,这里就不再赘述。关于这些规则的详细设置,同样可以参考 BootStrapValidator 的官方文档。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用BootStrapValidator完成前端输入验证 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript实现同时调用多个函数的方法

    为了实现同时调用多个函数,有两种方法可以选择:串行和并行。串行指的是按照指定的顺序依次执行函数,而并行指的是同时执行所有函数,不关心它们的顺序。 串行调用函数的方法 方法一:Promise 利用 ES6 的 Promise 实现,可以方便地实现多个函数的串行调用。 Promise 对象的主要作用是为处理异步操作提供一个统一的接口,其中包含三个状态:进行中(p…

    JavaScript 2023年5月27日
    00
  • JS实现简单路由器功能的方法

    接下来我将详细讲解“JS实现简单路由器功能的方法”的攻略: 什么是路由器 路由器是互联网信息传递的关键设备之一,它负责完成数据的转发、路由选择等功能,是数码家庭不可或缺的设备之一。 在网页开发中,我们可以通过实现一个简单的路由器,来实现单页应用,实现页面的跳转和状态的管理等功能。 实现简单路由器功能的方法 使用Hash实现 我们可以通过URL的Hash值来实…

    JavaScript 2023年5月19日
    00
  • JavaScript流程控制(分支)

    好的!首先,让我们先确定一下“JavaScript流程控制(分支)”的范畴。在JavaScript中,流程控制主要有三种,分别是分支结构、循环结构和跳转结构。而“JavaScript流程控制(分支)”指的是通过条件判断,执行不同代码路径的流程控制方式。 在JavaScript中,常用的条件判断有if…else和switch两种。下面我们将介绍这两种方法的…

    JavaScript 2023年5月27日
    00
  • 静态页面利用JS读取cookies记住用户信息

    静态页面读取cookie的基本原理 在使用JavaScript读取cookie之前,我们需要先了解什么是cookie。Cookie是指客户端保存在浏览器中的一小段文本数据,由Web服务器生成并存储在用户计算机上,当下次用户访问相同的站点时,服务器可读取此cookie的值,来判断用户是否合法,以及是否登录过等。 读取cookie需要使用JavaScript中的…

    JavaScript 2023年6月11日
    00
  • javascript正则表达式基础篇

    JavaScript正则表达式是用来搜索、替换和匹配文本的一种强大的工具。本篇攻略将介绍JavaScript正则表达式的基础知识,包括正则表达式的语法和使用方法,以及常用的一些正则表达式符号和元字符。 正则表达式的语法 正则表达式是由一个或多个字符组成。其中,字符表示文本或元素,而文本则表示与字符完全匹配的文本。下面是一些常用的正则表达式符号和元字符: /p…

    JavaScript 2023年5月28日
    00
  • 微信小程序—setTimeOut定时器的问题及解决

    微信小程序中,setTimeOut是常用的定时器函数,可以在指定的时间后执行某个函数。但是在使用过程中,也容易遇到以下几个问题:延迟时间不精确、在处于非当前页面时仍执行等问题。接下来,我将针对这些问题详细讲解,为大家提供解决方案。 问题一:延迟时间不精确 在使用setTimeOut时,由于小程序的架构限制,实际延迟的时间可能存在一定误差。解决这个问题的方法也…

    JavaScript 2023年6月11日
    00
  • C# 执行Javascript脚本的方法步骤

    C# 执行 JavaScript 脚本是非常常见的需求,下面是执行 JavaScript 脚本的方法步骤: 1. 引入COM组件 首先需要引入COM组件“Microsoft Internet Controls”。在Visual Studio的项目中点开Solution Explorer,右键References -> Add Reference…,…

    JavaScript 2023年5月27日
    00
  • 深入理解JS中的Function.prototype.bind()方法

    关于深入理解JS中的Function.prototype.bind()方法,本文将分为以下几个部分进行详细讲解: Function.prototype.bind()介绍 Function.prototype.bind()的参数和返回值 Function.prototype.bind()与this的绑定 Function.prototype.bind()的实现…

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