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. POJ2528 线段树离散化

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 62771   Accepted: 18120 ...

  2. Qt error ------ 出现Error - RtlWerpReportException failed with status code :-1073741823. Will try to launch the process directly

    出现原因: 使用了不存在的对象 数组越界了 用 delete 释放未分配的内存空间,或者超过一次释放同个内存 比如: 顺序不能颠倒 正确: ui->setupUi(this); ui->t ...

  3. python读书笔记-《简明python教程》上

    1月15日 <简明python教程>上 基本结构: 基础概念+控制流+函数+模块+数据结构+面向对象+I/O+异常+标准库+其他   1.概念 1-0    退出python linux: ...

  4. Android项目分包---总结-------直接使用

    注: 本文是从该文摘抄而来的.简单的说,就是阅读了该文,然后,再自己复述,复制形成该文.   1.罗列Android项目的分包规则   微盘使用分包规则   如下:     1).第一层com.sin ...

  5. HihoCoder 重复旋律

    あの旋律を何度も繰り返しでも.あの日見た光景を再現できない 无论将那段旋律重复多少次,也无法重现那一日我们看到的景象 もし切ないならば.時をまきもどしてみるかい? 若是感到惆怅的话,要试着让时光倒流吗 ...

  6. js_返回上一页(兼容苹果手机)

    返回上一页功能是常见的功能. 常用的有以下三种代码: window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话 ...

  7. hdu 1253 胜利大逃亡(简单题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1253 题目大意:在所给的时间能顺利离开城堡. #include <iostream> #i ...

  8. ribbon使用eureka的meta进行动态路由

    序 使用eureka的元数据信息,再配上ribbon的路由功能,就可以在api-gateway实现很多功能,比如灰度测试.生产调试等等.下面介绍一下,怎么使用jmnarloch大神提供的ribbon- ...

  9. ssh日常优化使用

    config文件的使用 ssh命令默认会加载 ~/.ssh/config 文件作为配置文件,如果没有则采用默认配置.如果我们想要对ssh进行定制,那么就可以使用如下方法 [root@linux-nod ...

  10. Linux 入门记录:四、Linux 系统常用命令

    一.日期时间 命令 date 查看.设置当前系统时间: date -u 格林威治时间 date %Y-%m-%d 显示格式化的时间 date -s "23:00" 使用 -s 参数 ...