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其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...
 
随机推荐
- Java中随机数生成的问题
			
[生成随机数序列] 我们只能利用Math.random()方法只能生成一个在[0,1)之间的double类型浮点数. 但如果我们想要生成[min, max]之间的随机整数时该怎么办呢? 此时可以用: ...
 - excel怎么样批量将unix时间戳转化为北京时间
			
https://jingyan.baidu.com/article/63acb44afb1e2561fcc17e3f.html 1.单元格属性改变日期 2.使用公式: =(A2+8*3600)/864 ...
 - P1120 小木棍 [数据加强版]   回溯法 终极剪枝
			
题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过5050. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它们的长度. 给出每段小木棍的长度 ...
 - JavaSE | Lambda| Optional| Stream API
			
JDK1.8新特性 1.接口:默认方法. 静态方法 2.Lambda表达式和StreamAPI 3.Optional类 4.新的日期时间API Lambda表达式:为了简化代码,使得Java支持 St ...
 - Machine Learning 算法可视化实现1 - 线性回归
			
一.原理和概念 1.回归 回归最简单的定义是,给出一个点集D,用一个函数去拟合这个点集.而且使得点集与拟合函数间的误差最小,假设这个函数曲线是一条直线,那就被称为线性回归:假设曲线是一条二次曲线,就被 ...
 - python + seleinum +phantomjs 设置headers和proxy代理
			
python + seleinum +phantomjs 设置headers和proxy代理 最近因为工作需要使用selenium+phantomjs无头浏览器,其中遇到了一些坑,记录一下,尤 ...
 - HDU-2177 取(2堆)石子游戏    (威佐夫博奕)
			
Problem Description 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同 ...
 - ZOJ 1610 Count the Colors 【线段树】
			
<题目链接> 题目大意: 在[0,8000]这个区间内,不断进行一些操作,将其中的一些区间染成特定颜色,如果区间重复的话,后面染的色块会覆盖前面染的色块,问最终[0,8000]这个区间内每 ...
 - Maven使用lib下的包
			
Maven使用中央仓库的同时,使用lib下的包 pom.xml添加如下配置 <build> <plugins> <plugin> <artifactId> ...
 - 2017-9-7-Linux Mint TFTP服务安装开启
			
Linux Mint端安装tftp软件 sudo apt-get install tftpd-hpa // tftpd-hpa是服务器端 sudo apt-get install tftp-hpa / ...