bootstrap-3-验证表单
js:
$('#nqs-add-userxinxi-form').bootstrapValidator({
message: 'This value is not valid',
excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uiUserName: {
message: '姓名称验证失败',
validators: {
notEmpty: {
message: '姓名不能为空'
},
stringLength: {
min: 32,
max: 32,
message: '姓名字数过长'
}
}
},
uiSex: {
message: '性别称验证失败',
validators: {
notEmpty: {
message: '性别不能为空'
}
}
},
uiPhone: {
message:'手机号验证失败',
validators: {
notEmpty: {
message: '手机号不能为空'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},
regexp: {
regexp: /^1[3|5|8|7]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
}
}
},
uiIdcardNumber: {
message:'身份证验证失败',
validators: {
notEmpty: {
message: '身份证不能为空'
},
stringLength: {
min: 18,
max: 18,
message: '请输入18位身份证号码'
},
regexp: {
regexp: /^[1-9]{1}[0-9]{16}[xX1-9]{1}$/,
message: '请输入正确的身份证号码'
}
}
},
uiMail: {
message:'邮箱失败',
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如:123@qq.com'
}
}
},
uiRegisterType: {
message:'认证类型失败',
validators: {
notEmpty: {
message: '认证类型不能为空'
}
}
}
}
});
html
<form class="form-horizontal" role="form" id="nqs-add-userxinxi-form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="uiUserName" name="uiUserName"placeholder=""/>
</div>
<label for="firstname" class="col-sm-2 control-label">姓别</label>
<div class="col-sm-4 nqs-fabupingtai-ul">
<input type="text" id="uiSex" name="uiSex"/>
</div>
</div>
<div class="form-group" id="custom_data">
<label for="firstname" class="col-sm-2 control-label">国家</label>
<div class="col-sm-4">
<inputname="uiCountry" id="uiCountry" class="form-control"></input>
</div>
<label for="firstname" class="col-sm-2 control-label">地区</label>
<div class="col-sm-4">
<input name="uiProvince" id="uiProvince" class="form-control" ></input>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="uiPhone" name="uiPhone"placeholder=""/>
</div>
<label for="firstname" class="col-sm-2 control-label">身份证</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="uiIdcardNumber" name="uiIdcardNumber"placeholder=""/>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="uiMail" name="uiMail"placeholder=""/>
</div>
<label for="lastname" class="col-sm-2 control-label">认证类型</label>
<div class="col-sm-4 nqs-fabupingtai-ul">
<input type="text" id="uiRegisterType" name="uiRegisterType" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn nqs-btn-inverse" id="nqs-add-userxinxi-form-submit" >保存</button>
<button type="reset" class="btn btn-default nqs-label-btn" id="nqs-add-userxinxi-form-reset" >取消</button>
</div>
</div>
</form>
在处理html的select验证时的处理
$("#form_user_input").bootstrapValidator({
message : 'This value is not valid',
excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)']//设置隐藏组件可验证
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon gluphicon-remove',
validating : 'glyphicon glyohicon-refresh'
},
fields : {
//这里是各种字段的验证
uiCountry: {
message: '国家验证失败',
validators: {
notEmpty: {
message: '未选择国家'
}
}
},
uiProvince: {
message: '地区验证失败',
validators: {
notEmpty: {
message: '未选择地区'
}
}
}
}
}).on('success.form.bv', function(e) {
e.preventDefault();//防止表单提交
//这里可以处理ajxa提交
});
添加红色部分即可验证,原因就是默认禁用/隐藏控件不验证,这里只手动排除禁用控件,即除了禁用控件外其他控件都校验
bootstrap-3-验证表单的更多相关文章
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- tp框架之自动验证表单
tp框架的create自动加载表单的方法可以自动根据自己定义的要求来验证表单里面的内容,但是由于是在后台执行代码,会拖慢程序运行速度,所以还是建议通过前端js来进行判断,后台只进行数据库的查询以及传值 ...
- jquery.validate 使用--验证表单隐藏域
jQuery validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证. 是因为 ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- MVC4中 jquery validate 不用submit方式验证表单或单个元素
正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...
- 运用jQuery写的验证表单
//运用jQuery写的验证表单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 开始使用HTML5和CSS3验证表单
使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...
随机推荐
- 51Nod1577 异或凑数 线性基
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1577.html 题意 给定一个长度为 n 的序列. 有 m 组询问,每一组询问给出 L,R,k ,询 ...
- TCP/UDP 协议,和 HTTP、FTP、SMTP,区别及应用场景
一.OSI 模型 OSI 模型主要作为一个通用模型来做理论分析,而TCP/IP 协议模型是互联网的实际通讯协议,两者一般做映射分析,以下不做严格区分和声明(好吧,比较懒): OSI 整个模型层次大致可 ...
- oracle的DBMS_JOB相关知识
http://langgufu.iteye.com/blog/1179235 查看当前定时任务 select job,next_date,next_sec,failures,broken from u ...
- redis虚拟内存
对于redis 这样的内存数据库, 内存总是不够用的. 除了可以将数据分割到多个 redis 服务器以外. 另外的能够提高数据库容量的办法就是使用虚拟内存技术把那些不经常访问的数据交换到磁盘上 如果我 ...
- dfs和bfs的区别
详见转载博客:https://www.cnblogs.com/wzl19981116/p/9397203.html 1.dfs(深度优先搜索)是两个搜索中先理解并使用的,其实就是暴力把所有的路径都搜索 ...
- HDU 4687 Boke and Tsukkomi (一般图最大匹配)【带花树】
<题目链接> 题目大意: 给你n个点和m条边,每条边代表两点具有匹配关系,问你有多少对匹配是冗余的. 解题分析: 所谓不冗余,自然就是这对匹配关系处于最大匹配中,即该匹配关系有意义.那怎样 ...
- sql - 递归update
declare v_rlt ):; l_sql ); -- variable that contains a query l_c sys_refcursor; -- cursor variable(w ...
- 利用nginx,腾讯云免费证书制作https
之前一直在研究,https怎么弄.最近看到了腾讯云提供的免费得ssl证书,寻思把网站弄成https. 首先先去腾讯云购买一个免费得证书. 点击后填写内容, 然后下载证书 解压证书就可以看到,提供四种方 ...
- WinXP/Win2003 VOL等各版本的含义
一般我们是通过版本来讨论同一软件区别的,比如WinXP免激活版.零售版等等,但通过讨论光盘的不同来定义版本更加容易理解. 因为软件的载体是光盘,微软不可能为了每一种版本都生产出不同的光盘,而只能是以相 ...
- webpack+vue+es6+postcss
本篇文章仿照vue-cli生成的项目结构,自己重新搭建目录,写一个小demo进一步巩固单文件组件的知识,并且学习中间件.一.要解决的问题1.如果把webpack.config.js放进build文件夹 ...