BootstrapValidator插件-表单验证

最新推荐文章于 2021-10-09 10:13:55 发布

爱吃香草冰淇淋的阿喵

最新推荐文章于 2021-10-09 10:13:55 发布

阅读量345

点赞数 1

分类专栏： Java程序文章标签：表单验证 BootstrapValidator

本文链接：https://blog.csdn.net/coralime/article/details/90598683

版权

Java程序专栏收录该内容

20 篇文章 0 订阅

订阅专栏

【源码及API】

BootstrapValidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

BootstrapValidator API：http://bv.doc.javake.cn/api/

【需要支持】

BootstrapValidator插件需要 jQuery 和 bootstrap 3 （亲测 bootstrap 4 也是可以的）

【demo】写了一个简单的用户修改密码验证的例子

#1-> 在<head>中添加JS文件和CSS

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="scripts/jquery-3.3.1.min.js"></script>

<!--Bootstrap JS-->
<script src="scripts/bootstrap.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!--表单验证-->
<script src="scripts/bootstrapValidator.min.js"></script>
<!--汉化-->
<script src="scripts/zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrapValidator.min.css">

<!--链接外部样式表-->
<link rel="stylesheet" type="text/css" href="css/login.css">

tips：

1-> 汉化文件 zh_CN.js 在下载的 BootstrapValidator 文件夹中的 \bootstrapvalidator-master\dist\js\language 路径下，把文件引入你的项目中即可。

2-> 外部样式表使用的是boostrap自带examples中的 sign.css 登陆样式自行修改的。

#2-> body 写基本表单

<form id="updatePsdFrom" class="form-signin">
    <div class="form-group" >
        <label style="font-weight: bold">请输入旧密码</label>
        <input type="password" class="form-control" name="oldPassword" id="oldPassword"/>
    </div>
    <div class="form-group" >
        <label style="font-weight: bold">请输入新密码</label>
        <input type="password" class="form-control" name="newPassword" id="newPassword"/>
    </div>
    <div class="form-group">
        <label style="font-weight: bold">请再次输入新密码</label>
        <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" />
    </div>
    <div class="form-group">
        <button type="submit" name="submit" class="btn btn-lg btn-primary btn-block mt-4" onclick="updateUserPsd()">确认修改</button>
    </div>
</form>

界面如下：

#3-> 给表单添加验证规则

<script type="text/javascript">
    $(document).ready(function () {
        $("#updatePsdFrom").bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    oldPassword: {
                        validators: {
                            notEmpty: {
                                message: '旧密码不能为空！'
                            }
                        }
                    },
                    newPassword: {
                        validators: {
                            notEmpty: {
                                message: '新密码不能为空！'
                            },
                            different:{
                                field: 'oldPassword',
                                message: '新密码不能与旧密码一致！'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '密码只允许包含字母、数字和下划线!'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '密码长度必须在6到18位之间！'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: '确认密码不能为空！'
                            },
                            identical: {
                                field: 'newPassword',
                                message: '两次密码输入不一致！'
                            },
                            different: {
                                field: 'oldPassword',
                                message: '新密码不能与旧密码一致！'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_]+$/,
                                message: '密码只允许包含字母、数字和下划线!'
                            },
                            stringLength: {
                                min: 6,
                                max: 18,
                                message: '密码长度必须在6到18位之间！'
                            }
                        }
                    }
                }
        });
    });
</script>

关于正则表达式的规则写法网上有很多，自行搜索即可。

#4-> 使用验证规则

给表单提交按钮添加了一个onclick() 函数

function updateUserPsd() {
    var oldPassword = document.getElementById("oldPassword").value;
    var confirmPassword = document.getElementById("confirmPassword").value;

    var bootstrapValidator = $("#updatePsdFrom").data('bootstrapValidator');
    bootstrapValidator.validate();
    
    //如果验证通过去后台进行交互操作
    if(bootstrapValidator.isValid()){
        $.ajax({
                    type: "post",
                    url: "UpdateUserPsdServlet",
                    data: {
                            old_password: oldPassword,
                            confirm_password: confirmPassword
                    },
                    async: false,
                    dataType:"json",
                    success: function (result) { 
                        //返回后台验证的结果
                    },
                    error: function (e) {
                        alert("错误！ " + e.status);
                        //进行验证的清除
                        bootstrapValidator.destroy();
                    }
                });
     }
}

演示效果：