热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

bootstrap中怎么设置表单必填

这期内容当中小编将会给大家带来有关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中怎么设置表单必填了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程笔记行业资讯频道。


推荐阅读
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 在 Vue 应用开发中,页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式,帮助开发者高效地实现页面间的数据交互与状态同步,同时分享一些最佳实践和注意事项。 ... [详细]
  • 本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先,介绍了如何正确引入必要的脚本文件,如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着,通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交,包括数据的发送、接收和处理。此外,还讨论了该方法在不同场景下的应用,如文件上传、表单验证和动态更新页面内容等,提供了丰富的代码示例和最佳实践建议。 ... [详细]
  • 微信小程序实现类似微博的无限回复功能,内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能,并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段,还包含了完整的页面代码,方便开发者按需使用。此外,HTML页面中包含了一些示例图片,开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计,帮助读者更好地理解和实现这一功能。 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 本地存储组件实现对IE低版本浏览器的兼容性支持 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • 本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求,并使用动态Form来优化开发流程,确保代码的简洁性和可维护性。同时,系统提供了用户友好的错误提示,以增强用户体验。 ... [详细]
  • 基于 Vue 和 Element UI 实现的简洁登录界面设计
    本文介绍了一种利用 Vue.js 和 Element UI 框架构建的简洁登录界面设计。该设计不仅注重用户体验,还确保了界面的美观性和易用性。通过合理的布局和组件配置,实现了高效、响应式的登录功能,适用于多种前端应用场景。 ... [详细]
  • 使用 Vuex 管理表单状态:当输入框失去焦点时自动恢复初始值 ... [详细]
  • 在Django中提交表单时遇到值错误问题如何解决?
    在Django项目中,当用户提交包含多个选择目标的表单时,可能会遇到值错误问题。本文将探讨如何通过优化表单处理逻辑和验证机制来有效解决这一问题,确保表单数据的准确性和完整性。 ... [详细]
  • AngularJS 进阶指南:第三部分深入解析
    在本文中,我们将深入探讨 AngularJS 的指令模型,特别是 `ng-model` 指令。`ng-model` 指令用于将 HTML 元素与应用程序数据进行双向绑定,支持多种数据类型验证,如数字、电子邮件地址和必填项检查。此外,我们还将介绍如何利用该指令优化表单验证和数据处理流程,提升开发效率和用户体验。 ... [详细]
  • 针对图像分类任务的训练方案进行了优化设计。通过引入PyTorch等深度学习框架,利用其丰富的工具包和模块,如 `torch.nn` 和 `torch.nn.functional`,提升了模型的训练效率和分类准确性。优化方案包括数据预处理、模型架构选择和损失函数的设计等方面,旨在提高图像分类任务的整体性能。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
author-avatar
笨雄不笨
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有