bootstrapValidator 参数校验框架
bootstrap：能够增加兼容性的强大框架.
因为项目需要数据验证，看bootstrapValidator 还不错，就上手一直，完美兼容，话不多说。
需要引用css：
bootstrap.min.css
bootstrapValidator.min.css
js:
jquery-1.10.2.min.js
bootstrap.min.js
bootstrapValidator.min.js
以上这些都是必须的。
先上个简单的例子,只要导入相应的文件可以直接运行：
<!DOCTYPE html>
<html>
<head>
<title>Using Ajax to submit data</title> <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<!-- class都是bootstrap定义好的样式，验证是根据input中的name值 -->
<form id="defaultForm" method="post" class="form-horizontal" action="ajaxSubmit.php">
<!-- 下面这个div必须要有，插件根据这个进行添加提示 -->
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" />
</div>
</div> <div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div> <div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div> <div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form> </div>
<script type="text/javascript">
$(document).ready(function() {
/**
* 下面是进行插件初始化
* 你只需传入相应的键值对
* */
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*输入框不同状态，显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证*/
username: {/*键名username和input name值对应*/
message: 'The username is not valid',
validators: {
notEmpty: {/*非空提示*/
message: '用户名不能为空'
},
stringLength: {/*长度提示*/
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}/*最后一个没有逗号*/
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>
</body>
</html>
这是最基本的，例子直接复制到本地，并且导入需要的css和js文件（JS中username，password等键值名和input标签中name属性值对应），运行就能够进行非空，长度验证，完全不需要管css样式。
效果图如下：
当然，以上都是插件写好的规则，如果想自己加匹配规则怎么办呢？
如下只要在input相对应的键值中加入一个regexp:{}键值对（在上面的js基础上修改）
username: {/*键名和input name值对应*/
message: 'The username is not valid',
validators: {
notEmpty: {/*非空提示*/
message: '用户名不能为空'
},
regexp: {/* 只需加此键值对，包含正则表达式，和提示 */
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '只能是数字和字母_.'
},
stringLength: {/*长度提示*/
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
}/*最后一个没有逗号*/
}
},
效果如下：
至此只要运行和看了例子，就能进行大部分的验证了，是不是很简单？只要写相应的键值对即可，再也自己什么都写了。下面进一步的使用，进行用户的注册，
需求：
实时验证用户名是否存在，密码不能和用户名相同，两次密码需要相同，提交之后需要验证返回值
html代码（直接替换上例子中的form即可）：
<form id="defaultForm" role="form" class="form-signin" action="registerAccount.do"
method="post">
<h2 class="form-signin-heading">请输入注册信息：</h2> <div class="form-group">
<label for="username">用户名：</label><input class="form-control"
type="text" name="username" id="username" />
</div>
<div class="form-group">
<label for="password">密码：</label><input class="form-control"
type="password" name="password" id="password"/>
</div>
<div class="form-group">
<label for="repassword">确认密码：</label><input class="form-control"
type="password" name="repassword" id="repassword" />
</div>
<div class="form-group">
<label for="phone">手机号码：</label><input class="form-control"
type="text" name="phone" id="phone" />
</div>
<div class="form-group">
<label for="email">email:</label><input class="form-control"
type="email" name="email" id="email" />
</div>
<div class="form-group">
<label for="invite">邀请码：</label><input class="form-control"
type="text" name="invite" id="invite">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">确认注册</button>
<a class="btn btn-lg btn-primary btn-block" href="../">返回首页</a>
</div>
</form>
js代码(直接替换例子中的JS)：
$(function(){/* 文档加载，执行一个函数*/
$('#defaultForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证：规则*/
username: {//验证input项：验证规则
message: 'The username is not valid',
validators: {
notEmpty: {//非空验证：提示消息
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
/**自定义提交数据，默认值提交当前input value
* data: function(validator) {
return {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
};
}
*/
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名由数字字母下划线和.组成'
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',
message: '不能和用户名相同'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮件不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如：123@qq.com'
}
}
},
phone: {
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手机号码不能为空'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
}
}
},
invite: {
message: '邀请码',
validators: {
notEmpty: {
message: '邀请码不能为空'
},
stringLength: {
min: 8,
max: 8,
message: '请输入正确长度的邀请码'
},
regexp: {
regexp: /^[\w]{8}$/,
message: '请输入正确的邀请码(包含数字字母)'
}
}
},
}
})
.on('success.form.bv', function(e) {//点击提交之后
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
});
});
由上面的代码可以看出在validators属性对应一个Json对象，里面可以包含多个验证的类型：
notEmpty：非空验证；
stringLength：字符串长度验证；
regexp：正则表达式验证；
emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）
除此之外，在文档里面我们看到它总共有46个验证类型，我们抽几个常见的出来看看：
base64：64位编码验证；
between：验证输入值必须在某一个范围值以内，比如大于10小于100；
creditCard：身份证验证；
date：日期验证；
ip：IP地址验证；
numeric：数值验证；
phone：电话号码验证；
uri：url验证；
bootstrapValidator 参数校验框架的更多相关文章
- 学习LayUI时自研的表单参数校验框架
开发背景&痛点:每次写前端的表单的时候需要对表单里用户填写的内容进行校验,减少服务器压力,提前对已知错误对用户提示.每次会要写很多的if else等等对输入框中的内容进行判断,并对为空.格式不 ...
- Java笔记 #06# 自定义简易参数校验框架——EasyValidator
索引 一.校验效果演示 二.校验器定义示例 定义一个最简单的校验器 正则校验器 三.EasyValidator的实现 四.更好的应用姿势——配合注解和面向切面 “参数校验”属于比较无聊但是又非常硬性的 ...
- 【hibernate-validator+SpringMVC】后台参数校验框架
hibernate-validator+SpringMVC 简介:简单说,就是对Entity进行校验. 1.导包,没有很严谨的对应关系,所以我用了比较新的版本,支持更多的注解. <depende ...
- 利用Aspectj实现Oval的自动参数校验
前言: Oval参数校验框架确实小巧而强大, 他通过注解的方式配置类属性, 然后通过Oval本身自带的工具类, 快速便捷执行参数校验. 但是工具类的校验需要额外的代码编写, 同时Oval对函数参数级的 ...
- 使用hibernate validate做参数校验
1.为什么使用hibernate validate 在开发http接口的时候,参数校验是必须有的一个环节,当参数校验较少的时候,一般是直接按照校验条件做校验,校验不通过,返回错误信息.比如以下校验 ...
- 【参数校验】 自定义校验器 (实现ConstraintValidator)
日常工作中写接口时,往往需要校验前端传来的枚举状态码,例如"1","2"等等, 这里使用java 303规范的参数校验框架封装一个自定义参数校验器: /** * ...
- SpringBoot 如何进行参数校验，老鸟们都这么玩的！
大家好,我是飘渺. 前几天写了一篇 SpringBoot如何统一后端返回格式?老鸟们都是这样玩的! 阅读效果还不错,而且被很多号主都转载过,今天我们继续第二篇,来聊聊在SprinBoot中如何集成参数 ...
- SpringBoot 如何进行参数校验
为什么需要参数校验 在日常的接口开发中,为了防止非法参数对业务造成影响,经常需要对接口的参数进行校验,例如登录的时候需要校验用户名和密码是否为空,添加用户的时候校验用户邮箱地址.手机号码格式是否正确. ...
- 徒手生撸一个验证框架，API 参数校验不再怕！
你们之中大概率早已练就了代码的拷贝.粘贴,无敌的码农神功,其实做久了业务功能开发,练就这两个无敌神功,那是迟早的事儿.今天先抛一个小问题,来打通你的任督二脉,就是很好奇的问一下:业务功能开发中,输入参 ...
随机推荐
- mysql防SQL注入搜集
SQL注入 例:脚本逻辑 $sql = "SELECT * FROM user WHERE userid = $_GET[userid] "; 案例1:SELECT * FROM ...
- 关于javascript中this
------------恢复内容开始------------ 1 var number = 5; 2 var obj = { 3 number: 3, 4 fn1: (function () { 5 ...
- Linux系列之链接
前言 在类Unix系统中,一个文件有可能被多个名字引用.我们使用链接来实现这一点,链接共有两种类型:硬链接和软链接,本文分别来介绍它们. 硬链接 硬链接也允许指向文件,但与符号链接的方式不同.它们是U ...
- LuoguP5322 [BJOI2019]排兵布阵(DP)
城为物,人为容,价值?排序后,一切都明了 #include <iostream> #include <cstdio> #include <cstring> #inc ...
- 1、spingIOC+IDEA+Maven
1.先配置spring.springmvc通用xml文件的头部信息 spring.springmvc通用xml文件的模板内容如下: 1 <?xml version="1.0" ...
- Word 的页眉、页脚、页码分别是什么？怎么设置？
页眉:在 Word 文档中,每个页面的顶部区域为页眉.常用于显示文档的附加信息,可以插入时间.图形.公司微标.文档标题.文件名或作者姓名等. 页脚:页脚与页眉的作用相同,都可以作为显示文档的附加信息, ...
- jQuery使用case记录
添加元素/内容追加等 元素内: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 元素外: after() - 在被选元素之后插入内容 before() ...
- Spark基础入门（01）—RDD
1,基本概念 RDD(Resilient Distributed Dataset) :弹性分布式数据集 它是Spark中最基本的数据抽象,是编写Spark程序的基础.简单的来讲,一个Spark程序可以 ...
- 聊一款可以自动跳过手机APP广告的神器！
平时使用手机,很多APP都有开屏广告,有些短的一两秒,长的三五秒,用起来浪费时间不说,有时候想点击跳过,一不小心还可以点进广告,进行跳转,让人很不舒服. 今天我给小伙伴们推荐一个可以跳过APP开屏广告 ...
- HMS Core Discovery第17期回顾|音随我动，秒变音色造型师
HMS Core Discovery第17期直播<音随我动,秒变音色造型师>,已于8月25日圆满结束,本期直播我们邀请了HMS Core音频编辑服务的产品经理.技术专家以及创新娱乐类应用& ...