1、利用bootstrap Validator表单验证进行表单验证需要如下CSS和JS.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.css" />

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

<script src="js/bootstrap.js" type="text/javascript"></script>

<script src="js/bootstrapValidator.js"></script>

具体样式找bootstrap Validator官网

2、validate规则配置

<script type="text/javascript">
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
account: {
message: '用户名验证失败',
validators: {
stringLength: {
min: 3,
max: 15,
message: '用户名长度必须在3到15位之间'
},
regexp: {
regexp: /^[a-z0-9_-]{3,16}$/,
message: '用户名只能包含、小写、数字和下划线'
}
}
},
password: {
validators: {
stringLength: {
min: 6,
max: 18,
message: '密码长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-z0-9_-]{3,16}$/,
message: '密码只能包含、小写、数字和下划线'
}
}
},
repassword: {
message: '密码无效',
validators: {
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
}
},
email: {
validators: {
emailAddress: {
message: '邮箱地址格式有误'
}
}
}
}
});
});

3、对应的html页面如下

/*表单信息异步传输*/
function register_ajax(id) {
if ($(id).data('bootstrapValidator').isValid()) {
var data = $(id).serializeJSON();
var url;
if (id === "#register_form") {
url = '/api/register/';
}
$.ajax({
type: 'post',
url: url,
data: JSON.stringify(data),
contentType: "application/json",
success: function (data) {
if (data === '恭喜您,账号已成功注册') {
window.location.href = '/api/login/';
} else {
alert(data);
}
},
error: function () {
alert('Sorry,服务器可能开小差啦, 请重试!')
}
});
}
}

其他的一些用法可以参考https://www.cnblogs.com/zhangtongzct/p/5728592.html

bootstrap bootstrapvalidator插件+adjax验证使用的更多相关文章

  1. BootStrapValidator表单验证插件的学习和使用

    BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...

  2. Thymeleaf使用bootstrap及其bootstrap相关插件(一)

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 在完成信息录入界面 ...

  3. 50个Bootstrap扩展插件

    Bootstap这个框架本身已经包含了开发网页的众多要素,包括了常用的工具以及扩展组件,如果你在开发页面时觉得在某些方面还不够的话,不妨看看最新收集的50个Bootstrap扩展插件,这些插件在我们平 ...

  4. 【前端_js】Bootstrap之表单验证

    Bootstrap表单验证插件bootstrapValidator使用方法整理 BootstrapValidator 表单验证超详细教程    

  5. BootstrapValidator 表单验证超详细教程

    一. 引入js 和css文件 在有jquery和bootstrap的页面里引入 bootstrapValidator.js bootstrapValidator.css 链接: https://pan ...

  6. Bootstrap+PHP表单验证实例

    简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...

  7. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  8. mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

    1.mvc5+ef6+Bootstrap 项目心得--创立之初 2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理 3.mvc5+ef6+Bootstrap 项目心得--WebG ...

  9. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. HDU1540 区间合并

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  2. 什么叫TLD、gTLD、nTLD、ccTLD、iTLD 以及几者之间的关系

    TLD TLD的全称是Top Level Domain,顶级域名,它是一个因特网域名的最后部分,也就是任何域名的最后一个点后面的字母组成的部分. 最早的顶级域名有:.com(公司和企业)..net(网 ...

  3. vijos 1002 简单压缩+DP

    描述 在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧.在桥上有一些石子,青蛙很讨厌踩在这些石子上.由于桥的长度和青蛙一次跳过的距离都是正整数,我们可以把独木桥上青蛙可能到达的点看成数轴上 ...

  4. Enterprise Architect 13 : 设置默认代码环境

    设置默认代码环境: Configure -> Options -> Source Code Engineering -> Default Language For Code Gene ...

  5. [BZOJ1101&BZOJ2301][POI2007]Zap [HAOI2011]Problem b|莫比乌斯反演

    对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d. 我们可以令F[n]=使得n|(x,y)的数对(x,y)个数 这个很容易得到,只需要让x, ...

  6. 程序员你为什么这么累? - Controller规范

    导读:程序员你为什么这么累? 接口定义:程序员你为什么这么累? - 接口定义 第一篇文章中,我贴了2段代码,第一个是原生态的,第2段是我指定了接口定义规范,使用AOP技术之后最终交付的代码,从15行到 ...

  7. nginx升级步骤

    今天应开发的需求,需要在Nginx增加一个模块,并不能影响现有的业务,所以就必须要平滑升级Nginx,好了,不多说了 1:查看现有的nginx编译参数 /usr/local/nginx/sbin/ng ...

  8. FineReport——JS二次开发(局部刷新)

    在FR中,可以通过在form表单设置多个报表模板,然后通过对某一模板刷新实现局部刷新的功能,在cpt模板中,由于只存在一个模板,所以无法实现局部刷新. 其实,最好的局部刷新办法是自定义一个页面,然后添 ...

  9. [ Python ] 基本数据类型及属性(下篇)

    1. 基本数据类型 (1) list 列表     (2) tuple 元组     (3) dict 字典     (4) set 集合 2. list 列表方法 Python 内置的一种数据类型, ...

  10. .vue,跟小程序文件在sublime里面怎么实现代码格式化

    .vue文件跟小程序的.wxml,.wxss用sublime的HTML/CSS/JS prettify插件也可以实现格式化代码的效果 首先你在sublime要已经安装好了HTML/CSS/JS pre ...