插件的使用(5)-bootstrapValidate

最新推荐文章于 2024-10-19 09:00:00 发布

banhui0728

最新推荐文章于 2024-10-19 09:00:00 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/noraZhang/p/10181032.html

版权

本文介绍如何利用BootstrapValidator插件简化表单验证过程。通过引入必要的JS和CSS文件，设置HTML结构，并通过jQuery进行初始化，即可实现包括非空检查、字符串长度限制及正则表达式验证等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台系统中经常要用到各种表单, 而这些表单中的数据第一需要正则验证, 第二需要输入内容的验证;如果表单内容很多,一条条去设置验证规则和获取内容会很麻烦, 这时候可以直接调用插件;

bootstrap 中的 boostrapValidator 的调用十分方便

(h+框架里也有很多常用的表单结构)

//调用方法
    //1. 引入 jquery , bootstrap 和 bootstrapValidator的 js 和 css 文件
  　<script src="jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrapvalidator-master/dist/css/bootstrapValidator.min.css">
    <script src="bootstrapvalidator-master/dist/js/bootstrapValidator.min.js"></script>

//2. html 结构
    <form>
        <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" name="username" />
        </div>
        <div class="form-group">
            <label>Email address</label>
            <input type="text" class="form-control" name="email" />
        </div>
        <div class="form-group">
            <button type="submit" name="submit" class="btn btn-primary">Submit</button>
        </div>
    </form>

//3. 初始化
<script>
//validator 中 notEmpty表示为空时的提示信息 stringLength 属性验证字符串长度, regexp为正则表达式, 邮箱自带正则表达式
 $(function() {
            
        $('form').bootstrapValidator({

　　　　　　　　message: 'This value is not valid',
            　feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength:{
                            min: 6,
                            max: 18,
                            message: "用户名长度必须在6-18位之间"
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: "用户名只能有大写,小写,数字和下划线组成"
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress : {
                            message: "邮箱地址有误"
                        }
                    }
                },
                submitHandler: function(submit, form, validator) {
                    alert("submit");
                }
            }
        });
    });
</script>