基于BootstrapValidator的Form表单验证(24)

2024-10-28 11:15:54

Form表单进行数据验证是十分必要的，我们可以自己写JS脚本或者使用JQuery Validate 插件来实现。对于Bootstrap而言，利用BootstrapValidator来做Form表单验证是个相当不错的选择，两者完全兼容，我们也不用去关注CSS样式等美工效果。

0x01 引入BootstrapValidator

官网：BootstrapValidator，作为一个纯粹的使用者，我们可以在上面的链接处下载相关文件并引入，也可以利用CDN方式引入：

0x02 用户注册实例

下面使用一个用户注册的实例，来总结BootstrapValidator的基本使用方法（其中的JS和CSS文件的引入，请根据自己的实际位置进行调整）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>用户注册</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../../css/bootstrap.min.css" rel="stylesheet">
 <link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../../js/bootstrap.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container col-lg-3 col-lg-offset-3">
 <div class="page-header">
  <h3>用户注册</h3>
 </div>
 <div>
  <form id="registerForm" method="POST" class="form-horizontal" action="用户注册.html">
   <div class="form-group">
    <!--注册的用户名-->
    <label class="control-label" for="username">*请输入注册用户名:</label>
    <input type="text" class="form-control" placeholder="请输入注册用户名" name="username" id="username">
   </div>
   <div class="form-group">
    <!--注册密码-->
    <label class="control-label" for="password">*请输入注册密码:</label>
    <input type="password" class="form-control" placeholder="请输入注册密码" name="password" id="password">
   </div>
   <div class="form-group">
    <!--确认密码-->
    <label class="control-label" for="repassword">*请输入确认密码:</label>
    <input type="password" class="form-control" placeholder="请输入确认密码" name="repassword" id="repassword">
   </div>
   <div class="form-group">
    <label class="control-label" for="phone">*请输入手机号码:</label>
    <input type="text" class="form-control" placeholder="请输入手机号码" name="phone" id="phone">
   </div>
   <div class="form-group">
    <label class="control-label" for="email">*请输入电子邮箱:</label>
    <input type="text" class="form-control" placeholder="请输入电子邮箱" name="email" id="email">
   </div>
   <div class="form-group">
    <label class="control-label" for="inviteCode">*请输入邀请码:</label>
    <input type="text" class="form-control" placeholder="请输入邀请码" name="inviteCode" id="inviteCode">
   </div>
   <div class="form-group">
    <button type="submit" class="btn btn-primary form-control">提交注册</button>
   </div>
  </form>
 </div>
</div>
<script>
 $(function () {
  <!--数据验证-->
  $("#registerForm").bootstrapValidator({
   message:'This value is not valid',
//   定义未通过验证的状态图标
   feedbackIcons: {/*输入框不同状态，显示图片的样式*/
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
//   字段验证
   fields:{
//    用户名
    username:{
     message:'用户名非法',
     validators:{
//      非空
      notEmpty:{
       message:'用户名不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'用户名长度必须位于3到20之间'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'用户名由数字字母下划线和.组成'
      }
     }
    },

//    密码
    password:{
     message:'密码非法',
     validators:{
      notEmpty:{
       message:'密码不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'密码长度必须位于3到20之间'
      },
//      相同性检测
      identical:{
//       需要验证的field
       field:'password',
       message:'两次密码输入不一致'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密码由数字字母下划线和.组成'
      }
     }
    },

    //    确认密码
    repassword:{
     message:'密码非法',
     validators:{
      notEmpty:{
       message:'密码不能为空'
      },
//      限制字符串长度
      stringLength:{
       min:3,
       max:20,
       message:'密码长度必须位于3到20之间'
      },
//      相同性检测
      identical:{
//       需要验证的field
       field:'password',
       message:'两次密码输入不一致'
      },
//      基于正则表达是的验证
      regexp:{
       regexp:/^[a-zA-Z0-9_\.]+$/,
       message:'密码由数字字母下划线和.组成'
      }
     }
    },

//    电子邮箱
    email:{
     validators:{
      notEmpty:{
       message:'邮箱地址不能为空'
      },
      emailAddress:{
       message:'请输入正确的邮箱地址'
      }
     }
    },

//    手机号码
    phone:{
     validators:{
      notEmpty:{
       message:'手机号码不能为空'
      },
      stringlength:{
       min:11,
       max:11,
       message:'请输入11位手机号码'
      },
      regexp:{
       regexp:/^1[3|5|8]{1}[0-9]{9}$/,
       message:'请输入正确的手机号码'
      }
     }
    },

//    邀请码
    inviteCode:{
     validators:{
      notEmpty:{
       message:'邀请码不能为空'
      },
      stringlength:{
       min:9,
       max:9,
       message:'请输入9位邀请码'
      },
      regexp:{
       regexp:/^[\w]{8}$/,
       message:'邀请码由数字和字母组成'
      }
     }
    }
   }
  })
 })
</script>
</body>
</html>

验证效果如下：

0x03 后记

在实际应用中，可能还会遇到类似Ajax提交验证的问题，处理过程是类似的，以后再结合实际的应用来讲这个问题。
类似BootstrapValidator这种基于JS来做验证的过程只是客户端验证，只是为了提高用户体验，并不能保证提交数据的安全性，后端开发者还要做相应的后台验证。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

BootstrapValidator超详细教程(推荐)

一.引入必要文件下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapVa
jquery插件bootstrapValidator表单验证详解

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
jquery插件bootstrapValidator数据验证详解

因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说. bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2.min.js bootstrap.min.js bootstrapValidator.min.js (下载实例) 以上这些都是必须的. 先上个简单的例子,只要导入相应的文件可以直接运行: <!DOCTYP
bootstrapValidator bootstrap-select验证不可用的解决办法

如何解决bootStrapValidator bootStrap-select验证不可用,只要三步: 思路:把多选下拉框的选中值,赋给一个隐藏的input组件,再对input组件进行验证(bootstrap-validator默认情况下hidden,disabled的组件不验证,可以通过excluded属性更改),具体步骤如下: 1.表单验证初始化(js) $('#myModalForm').bootstrapValidator({ message: 'This value is not val
BootStrap Validator 根据条件在JS中添加或移除校验操作

这是开始的校验代码 function initValidate() { <span style="white-space:pre"> </span>$('#detailform').bootstrapValidator({ <span style="white-space:pre"> </span>feedbackIcons : { <span style="white-space:pre"&
bootstrapValidator自定验证方法写法

本文实例为大家分享了bootstrapValidator自定验证方法写法,供大家参考,具体内容如下 //表单验证 issueInvoiceForm.validation = function(){ $('#issueInvoiceForm').on('init.field.bv', function(e, data) { var $icon = data.element.data('bv.icon'), options = data.bv.getOptions(), // Entire opti
基于BootstrapValidator的Form表单验证(24)

Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd
基于javascript的Form表单验证

Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { back
JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
bootstrapValidator.min.js表单验证插件

本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可. 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <
vue elementui form表单验证的实现

最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题我们公司的项目比较大表格表单的页面都不胜数 ,基于此封装了一些可复用的代码. 2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能强大的组件减少了我们大量的开发时间 .双剑合璧天下无敌! 但每个公司的代码风格不同用户
详解Angular Reactive Form 表单验证

本文我们将介绍 Reactive Form 表单验证的相关知识,具体内容如下: 使用内建的验证规则动态调整验证规则自定义验证器自定义验证器 (支持参数) 跨字段验证基础知识内建验证规则 Angular 提供了一些内建的 validators,我们可以在 Template-Driven 或 Reactive 表单中使用它们. 目前 Angular 支持的内建 validators 如下: required - 设置表单控件值是非空的. email - 设置表单控件值的格式是 email.
Python中使用django form表单验证的方法

一. django form表单验证引入有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form</title> </head> <body> <div> <for
Vue ElementUI之Form表单验证遇到的问题

首先说一下我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再
jQuery form 表单验证插件(fieldValue)校验表单

jQuery form表单验证相关知识,在做项目中经常会用到,其实也不算复杂,下面通过一段代码给大家介绍jQuery form 表单验证插件(fieldValue)校验表单的相关知识,感兴趣的朋友一起学习吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--使用 fieldValue

基于BootstrapValidator的Form表单验证(24)

相关推荐

随机推荐