bootstrap validator 使用 带代码
如何使用bootstrapVlidator插件?
- 下载bootstrapVlidator插件
- 在需要使用的页面引入bootstrapVlidator的js文件和css文件
如:
注:
在此基础之前必须引入jquery库和bootstrap的js文件和css样式。
如:
- 放入所需插件
- 引入路径
3.表单代码:
<form id="registForm">
<!--下面是用户名输入框-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span>
</span>
<input id="userName" name="username" type="text" class="form-control" placeholder="请输入用户名" aria-describedby="basic-addon1">
</div>
</div>
<br>
<!--下面是邮箱输入框-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input id="email" name="email"type="text" class="form-control" placeholder="请输入邮箱">
</div>
</div>
<br>
<!--下面是手机号输入框-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-earphone"></span>
</span>
<input id="phoneNumber" name="phonenumber" type="text" class="form-control" placeholder="请输入手机号">
</div>
</div>
<br>
<!--下面是密码输入框-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input id="passWord" name="password1" type="text" class="form-control" placeholder="请输入密码">
</div>
</div>
<br>
<!--下面是确认密码输入框-->
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-lock"></span>
</span>
<input id="passwordTow" name="password2" type="text" class="form-control" placeholder="请重新输入密码">
</div>
</div>
<br>
<!--下面是登陆按钮,包括颜色控制-->
<div class="form-group">
<button type="submit" name="submit" style="width:135px;" onclick="registsubmit()" class="btn btn-primary btn-sm">提交</button>
<button type="reset" id="resetBtn" name="reset" style="width:135px;" class="btn btn-primary btn-sm">重置</button>
</div>
</form>
4.js代码
1. form里每一个input标签必须要有name属性,是根据name属性的值来设置条件
2. 属性介绍
username:是用户input标签那么的属性值
notEmpty代表不为空验证
Message:写提示语
stringLength:设置字符串长度
regexp:写正则表达式
identical: 相同,用来验证两次密码是否相同
field:写想要相同的mame属性值
//表单验证
$(function () {
$('form').bootstrapValidator({
message: '请重新输入',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含大写、小写、数字和下划线'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱地址格式有误'
}
}
},
phonenumber: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '请输入11为手机号'
}
}
},
password1: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 12,
message: '密码长度必须在6到12位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},
identical: {
field: 'password2',
message: '两次输入的密码不相符'
}
}
},
password2: {
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 12,
message: '密码长度必须在6到12位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含大写、小写、数字和下划线'
},
identical: {
field: 'password1',
message: '两次输入的密码不相符'
}
}
}
},
});
});
如终极效果:
5.重置按钮js写法,包括重置validator验证规则
//重置按钮事件
$("#resetBtn").off().on("click",function(){
$(registForm).data("bootstrapValidator").resetForm();
});
注:"#resetBtn“这个代表重置按钮id值
bootstrap validator 使用 带代码的更多相关文章
- BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
最近一直在做互金平台,做到后台提交表单的时候出现验证提交数据一直没有提交的问题.于是百度了一下.果然是版本问题造成的.幸好找到了问题所在.我一直仿照的是东钿原微信平台的做法,但是使用byond的后台框 ...
- 三石推荐!把 Bootstrap 小清新带回家!
无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion 喜欢就来赞一个! 把麻烦留给三石 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- bootstrap validator 出现Maximum call stack size exceeded
如果用 c# 里面用的是 taghelper 的控件,有可能造成 Maximum call stack size exceeded bootstrap validator 必须是继承 bootst ...
- Bootstrap CSS 栅格、代码和表格
一.bootstrap栅格 Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap 网格系统(G ...
- bootstrap去除自带15px内边距,去除container 15px padding
壹 ❀ 问题 在使用bootstrap时,由于bootstrap槽宽特性,我们在布局时会发现container以及col-**-**左右都会自带15px的padding,有时候空间不足就想着怎么把b ...
- 用好spring mvc validator可以简化代码
表单的数据检验对一个程序来讲非常重要,因为对于客户端的数据不能完全信任,常规的检验类型有: 参数为空,根据不同的业务规定要求表单项是必填项 参数值的有效性,比如产品的价格,一定不能是负数 多个表单项组 ...
- bootstrap 新手学习笔记 代码整理
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap表格多样式及代码
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Vim 神器的打造方式
Vim 神器的打造方式 [字体:大 中 小] Vim 是一个上古神器,本篇文章主要持续总结使用 Vim 的过程中不得不了解的一些指令和注意事项,以及持续分享一个前端工作者不得不安装的一些插 ...
- TIDB技术文档翻译
http://blog.csdn.net/antony9118/article/details/60470115
- [板子]Floyd&Dijkstra
谨以此笔记记录jjw高三党四个月学习NOI的历程..如转载请标记出处 Floyd算法: 默认是业界最短路最简单的写法,并且只有五行.时间复杂度为O(N3),空间复杂度为O(N2). ;k<=n; ...
- 走近 Python (类比 JS)
Python 是一门运用很广泛的语言,自动化脚本.爬虫,甚至在深度学习领域也都有 Python 的身影.作为一名前端开发者,也了解 ES6 中的很多特性借鉴自 Python (比如默认参数.解构赋值. ...
- 1192: [HNOI2006]鬼谷子的钱袋
1192: [HNOI2006]鬼谷子的钱袋 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3530 Solved: 2575[Submit][St ...
- Interviewe
Interviewe Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- 全排列Permutations
描述 Given a collection of numbers, return all possible permutations.For example,[1,2,3] have the foll ...
- Breadth-first search 算法(Swift版)
在讲解Breadth-first search 算法之前,我们先简单介绍两种数据类型Graph和Queue. Graph 这就是一个图,它由两部分组成: 节点, 使用圆圈表示的部分 边, 使用线表示的 ...
- 虚拟机通信配置与Xshell连接
本文主要讲解虚拟机通信配置的详细步骤和Xshell工具连接,以及如何诊断网络问题并进行相应配置的问题. 1. 虚拟机通信配置 虚拟机通信配置的基本流程如图所示: 首先,我们先打开新建的虚拟机,然后输入 ...
- ubuntu server小技巧(不定期更新)
0.常用工具apt安装包名 # ssh服务器工具 apt-get install openssh-server # RabbitMQapt-get install rabbitmq-server # ...