欢迎光临一流素材网,免积分免费素材下载!
秒应用
帝云CMS 帝云CMS
当前位置:首页 > JS代码 > 精品插件

BootstrapValidator - 表单验证插件

所属栏目:精品插件更新时间:2023-03-23原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明
  • 使用文档
  • 效果演示

BootstrapValidator是一款基于Bootstrap的强大jQuery表单验证插件。


使用方法

一、引入 js 和 css 文件

<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>


二、HTML表单示例

<form class="form-horizontal" id="demo_form">
    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Email address</label>
        <div class="col-lg-9">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>


说明

如果想要对字段进行验证,就必须放在 <div class="form-group"></div>

表单元素必须要有name属性值,用来匹配字段, 比如 name="email" 


三、添加规则验证

1、在html标签中添加,代码如下所示:

<div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
        <input type="text" class="form-control rounded-0" id="email" name="email" required data-bv-notempty-message="自定义未填提示" placeholder="* {dr_lang('Email')}">
    </div>
</div>


2、添加 js 文件,代码如下:

$(function () {
    $(".dyui-validation").bootstrapValidator({
        excluded: [":disabled"],
        message: '表单校验',
        feedbackIcons: {
            valid: 'bi bi-check-lg',
            invalid: 'bi bi-x-lg',
            validating: 'bi bi-arrow-repeat'
        },
        fields: {
            uname:{
                message: "name字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    regexp: {
                        regexp:/^[\u4e00-\u9fa5]+$/,
                        message: '只能输入汉字'
                    },
                    stringLength: {/*长度提示*/
                        max: 16,
                        message: '用户名不能超过16个字符'
                    }
                }
            },
            mobile:{
                message: "mobile字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '手机号码不能为空'
                    },
                    regexp: {
                        regexp:/^1[3456789]\d{9}$/,
                        message: '手机号码格式错误'
                    },
                }
            },
            email: {
                message: "email字段校验",
                trigger:"change",
                validators: {
                    emailAddress: {
                        message: 'Mailbox format error'
                    }
                }
            },
            area: {
                message: "area字段校验",
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '所在地区不能为空'
                    }
                }
            },
            address: {
                message: "address字段校验",
                trigger: "change",
                validators: {
                    notEmpty: {
                        message: '详细地址不能为空'
                    },
                    stringLength: {/*长度提示*/
                        max: 50,
                        message: '详细地址不能超过50个字符'
                    }
                }
            },
            default: {

            }
        }
    });

});




暂无
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
评论功能已关闭
华为云折上折
最受欢迎的

1swiper6-开源、免费、强大的触摸滑动插件

2aos.js-网页滚动加载动画的jQueryCSS3动画库

4exzoom-一款jquery商城商品放大镜插件

5bootstrap4多级导航/侧栏导航插件-sina-nav

6clipboard.js-将文本复制到剪贴板的插件

7jQuery.print - 打印网页指定内容的JS插件

8jquery-validate - 一款轻量级验证插件

9BootstrapValidator - 表单验证插件

企业网站开发
最新更新的

1jquery-validate - 一款轻量级验证插件

2BootstrapValidator - 表单验证插件

3jQuery.print - 打印网页指定内容的JS插件

4bootstrap4多级导航/侧栏导航插件-sina-nav

5exzoom-一款jquery商城商品放大镜插件

6aos.js-网页滚动加载动画的jQueryCSS3动画库

8clipboard.js-将文本复制到剪贴板的插件

9swiper6-开源、免费、强大的触摸滑动插件