bootstrap必填红心_bootstrap如何设置表单必填

在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件

然后建立一个form表单，添加表单控件，表单控件必须有绝对定位，不然会报错

Form title

label

Submit

编写js文件，通过js文件验证表单：$(function () {

$("#form-test").bootstrapValidator({

live: 'disabled',//验证时机，enabled是内容有变化就验证(默认)，disabled和submitted是提交再验证

excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的

submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面

message: '通用的验证失败消息',//好像从来没出现过

feedbackIcons: {//根据验证结果显示的各种图标

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

fields: {

text: {

validators: {

notEmpty: {//检测非空,radio也可用

message: '文本框必须输入'

stringLength: {//检测长度

min: 6,

max: 30,

message: '长度必须在6-30之间'

regexp: {//正则验证

regexp: /^[a-zA-Z0-9_\.]+$/,

message: '所输入的字符不符要求'

remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在

url: '指定页面',

message: 'The username is not available'

different: {//与指定文本框比较内容相同

field: '指定文本框name',

message: '不能与指定文本框内容相同'

emailAddress: {//验证email地址

message: '不是正确的email地址'

identical: {//与指定控件内容比较是否相同，比如两次密码不一致

field: 'confirmPassword',//指定控件name

message: '输入的内容不一致'

date: {//验证指定的日期格式

format: 'YYYY/MM/DD',

message: '日期格式不正确'

choice: {//check控件选择的数量

min: 2,

max: 4,

message: '必须选择2-4个选项'

}

});

$("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证

$("#form-test").bootstrapValidator('validate');//提交验证

if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码

alert("yes");//验证成功后的操作，如ajax

}

});

bootstrap必填红心_bootstrap如何设置表单必填相关推荐

微信小程序设置表单界面
问题表单在小程序中非常常见,几乎每一个小程序都会有表单的界面.一些登录界面,身份验证界面,都是由表单来填写信息的.表单的内容有很多,提示性的输入框,手机号码短信验证的输入框以及错误提示输入框等.那么 ...
如何设置dedecms自定义表单必填项？
用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户.那我们要如何设置织梦cms自定义表单必填项呢? ...
html5 表单必填项,javascript - HTML5表单必填属性。设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
ExtJS4为form表单必填项添加红色*标识
通常情况下,ExtJS4的form表单必填项在输入状态下会有特殊提示,非输入状态下,显示却和其他项没有任何区别.为使必填项更加容易区分,我们需要根据allowBlank的属性值,为form表单中的必填 ...
Element select表单必填验证
Element select 表单必填验证多选问题: 特别注意:如第一段代码这里的区别是prop和v-model绑定的值不一样,这样的话是不行的,他们两个的值必须一样!!!!!而且还有一种情况,就 ...
htmlparser设置表单属性值
想用htmlparser实现自动填写表单并提交,但暂时实现不了提交,计划通过httpclient实现.htmlparser可实现设置表单属性值,但貌似意义不大,其主要价值在解析html网页.设置表单属 ...
css在线留言星号,使用CSS 给表单必选项添加星号的实现方法
在制作网页表单的时候,如果一个选项是必填的,通常会给选项添加一个星号,比如 Typecho 的评论表单: 姓名 * 示例: *姓名然后给星号添加一点 CSS 样式: .form-group span ...
bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
rails设置表单默认值amp;amp;隐藏表单
需求: 用户没有登录时游客评论,需要游客输入用户名和评论内容:当用户已登录时,读取session获取用户名,隐藏输入用户名的表达,用户直接发表评论. 用户评论代码: <h2>Add a c ...
BPM实例分享：如何设置表单字体样式
系统版本:V10.0 一些业务场景中,时尔需要改变表单字体那如何设置表单字体样式? 本文将会针对全局表单和单个表单进行阐述! 1.全局表单: 修改WFRES\CSS\MvcSheet.css , ...

bootstrap必填红心_bootstrap如何设置表单必填

bootstrap必填红心_bootstrap如何设置表单必填相关推荐

最新文章

热门文章