bootstrapvalidator 用法

最新推荐文章于 2022-09-05 13:42:47 发布

weixin_30770495

最新推荐文章于 2022-09-05 13:42:47 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ligenyun/p/9360400.html

本文介绍如何使用BootstrapValidator插件进行表单验证，包括引入JS和CSS文件、配置验证规则和反馈图标等。通过实例展示了如何设置用户名和邮箱的验证条件，如非空检查、长度限制、正则表达式匹配及电子邮件格式验证。

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

1.引入js、css

2.用法

API:http://bootstrapvalidator.votintsev.ru/api/

参考博客：https://blog.youkuaiyun.com/u013938465/article/details/53507109

https://blog.youkuaiyun.com/freedom_wbs/article/details/54617741

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title> 
    <link href="scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="scripts/bootstrap/BootValidate/bootstrapValidator.min.css" rel="stylesheet" />
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/bootstrap/js/bootstrap.min.js"></script>  
    <script src="scripts/bootstrap/BootValidate/bootstrapValidator.min.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <form onsubmit="return myvalidate()" action="/User/Create" method="post">
        <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>
    <script>
        function myvalidate() {
            $("form").bootstrapValidator('validate');//提交验证          
        }

        $(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: '邮箱地址格式有误'
                            }
                        }
                    } 
                }
            });
        });
    </script>
</body>
</html>