0

0

bootstrap如何设置表单必填

尚

发布时间:2019-07-30 10:45:27

|

7635人浏览过

|

来源于php中文网

原创

bootstrap如何设置表单必填

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

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

Form title

编写js文件,通过js文件验证表单:

Eyoucms品牌咖啡茶饮网站管理系统1.7.0
Eyoucms品牌咖啡茶饮网站管理系统1.7.0

品牌咖啡茶饮网站管理系统是一款开源的,衍生于优秀的内容管理系统易优cms。 品牌咖啡茶饮网站管理系统秉承了易优CMS的先进设计理念,并且专注于餐饮企业。 品牌咖啡茶饮网站管理系统特点: 简单方便 品牌咖啡茶饮网站管理系统源码包安装十分方便,只需输入域名,然后再点两次鼠标,期间填入一些必要的安装信息就可以轻松完成整个安装过程。 使用十分便捷,安装后进后台,无需事先进行任何设置操作。 要进行网站设置

下载
$(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入门教程

相关专题

更多
html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

37

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

17

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

228

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

60

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

14

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

6

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

27

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.6万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号