bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法
实用方法
1.引入
在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件
2. 按照bootstrap的表单组件 构建html代码
在表单中,若对某一字段想添加验证规则,默认需要以<div class=”form-group”></div>
包裹(对应错误提示会根据该class值定位),内部<input class="form-control" />
标签必须有name属性值,此值为验证匹配字段。
<form id="loginForm">
<div class="form-group">
<label for="username">管理员</label>
<input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="reset" class="btn btn-default">重置</button>
<button type="submit" class="btn btn-primary">登录</button>
</form>
3.找到需要做校验的表单 初始化校验插件方法
$('#loginForm').bootstrapValidator({
/*根据验证结果显示的各种图标*/
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
/*去校验表单元素 用户名 密码*/
/*校验状态:未校验 NOT_VALIDATED 正在校验 VALIDATING 校验成功 VALID 校验失败 INVALID */
/*校验规则:是需要去配置*/
/* fields 字段 ---> 表单内的元素*/
fields:{
/*指定需要校验的元素 通过name数据去指定*/
username:{
/*配置校验规则 规则不止一个*/
validators:{
/*配置具体的规则*/
notEmpty:{
/*校验不成功的提示信息*/
message:'请您输入用户名'
},
/*自定义规则*/
callback:{
message:'用户名错误'
}
}
},
password:{
validators:{
notEmpty:{
message:'请您输入密码'
},
stringLength:{
min:6,
max:18,
message:'密码6-18个字符'
},
/*自定义规则*/
callback:{
message:'密码错误'
}
}
}
}
/*当校验失败 默认阻止了提交*/
/*当校验成功 默认就提交了*/
/*阻止默认的提交方式 改用ajax提交方式*/
}).on('success.form.bv',function (e) {
/*阻止浏览器默认行为*/
e.preventDefault();
var $form = $(e.target);
/*发登录请求*/
$.ajax({
type:'post',
url:'/employee/employeeLogin',
/*可传递的数据格式 对象 序列化后的数据 key=value的字符串 [{name:'',value},...] */
data:$form.serialize(),
dataType:'json',
success:function (data) {
/*响应成功后的逻辑*/
if(data.success){
location.href = '/admin/index.html';
}else{
if(data.error == 1000){
/*调用校验插件 让该选项置为 校验失败状态 提示校验失败的信息*/
/*updateStatus(‘哪个元素’,‘修改为什么状态’,‘校验规则’)*/
$form.data('bootstrapValidator').updateStatus('username','INVALID','callback')
}else if(data.error == 1001){
$form.data('bootstrapValidator').updateStatus('password','INVALID','callback')
}
}
}
});
});
bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法的更多相关文章
- bootstrapValidator.js,最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- Bootstrap表单验证插件bootstrapValidator使用方法整理
插件介绍 先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用方法:http://www.cnblogs.com/huangc ...
- bootStrap表单验证插件的使用
bootStrapValidator插件的使用 1.插件的下载和引用 首先要引入bootstrapValidator插件.链接的地址:https://www.bootcdn.cn/jquery.boo ...
- bootstrapValidator表单验证插件
bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votin ...
- BootStrapValidator表单验证插件的学习和使用
BootStrapValidator表单验证插件的学习和使用 引入标签 <script type="text/javascript" src="https://cd ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- JS表单验证插件(支持Ajax验证)
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
随机推荐
- .Net core使用Quartz.Net 实现定时任务
很多情况下,我们需要完成一些定时执行的功能,用很多定时工具,像:hangfire,TimeJob,以及Quartz.net,不过quartz.net 比较精确一些,功能也比较强大,所以我选择了Quar ...
- MYSQL命令简要笔记
mysqldump "C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqldump.exe" --host=localhost ...
- 常用模块 - shutil模块
一.简介 shutil – Utility functions for copying and archiving files and directory trees.(用于复制和存档文件和目录树的实 ...
- html+css3 实现各种loading效果
效果见下图 代码: 建议直接去本人github上浏览代码 https://github.com/wuliqiangqiang/loading <!DOCTYPE html> <htm ...
- Git命令行和Xcode结合使用(我来告诉你这行代码谁写的)
现在一直使用Git来管理代码,对于有强迫症的我来说,依旧选择了命令行,下面这段话可以更好的解释我为什么喜欢使用终端敲命令. There are a lot of different ways to u ...
- 面试:Hbase和Hive的区别
区别: 1. Hive是一个构建在Hadoop基础设施之上的数据仓库,通过HQL查询存放在HDFS上的数据,不能交互查询.HBase是一种Key/Value系统,它运行在HDFS之上,可以交互查询. ...
- 企业SVN版本管理与代码上线方案
1.SVN服务实战 1) 什么是SVN(Subversion)? Svn(subversion)是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Sv ...
- Simple, Poetic, Pithy
源自:Rob Pike points out Simple, Poetic, Pithy Don't communicate by sharing memory, share memory by co ...
- 如何将github项目上传至gitlab
一.修改远程分支关联 删除远程分支关联 将指向github的远程分支关联关系删除 git remote rm origin 添加新的远程分支关联 新的remote地址指向gitlab相应地址 git ...
- 不使用IDE,用maven命令打包war项目及出现的问题解决(最全攻略,亲测有效)
第一次在博客园写博客,写的不好大家见谅啊!! 一.首先,在用maven打包之前,一定确认好你使用的jdk版本和maven的版本,最好就是用jdk1.8和maven3.3以上的,版本太低了容易出现一些意 ...