欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表单验证插件 bootstrapValidator

程序员文章站 2022-05-10 18:59:02
...

自己使用后,记录一下

引入:除了bootstrap.css与bootstrap.min.js外,还引入了2个

bootstrapValidator.css    bootstrapValidator.js

<form id="defaultForm" method="post" class="form-horizontal" action="">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">用户名</label>
                        <div class="col-lg-5">
                            <input id="username" type="text" class="form-control" name="username" placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">登录密码</label>
                        <div class="col-lg-5">
                            <input id="userpwd" type="password" class="form-control" name="password" placeholder="请输入密码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">确认密码</label>
                        <div class="col-lg-5">
                            <input id="r_userpwd" type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码"/>
                        </div>
                    </div>

        ...
    $('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {//根据验证结果显示的各种图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
},
    username: {
        message: '用户名无效',
        validators: {
            notEmpty: {
                message: '用户名是必需的,不能是空的'
            },
            stringLength: {
                min: 4,
                max: 30,
                message: '用户名必须大于4,小于30个字符长'
            },
            regexp: {
                        // regexp: /^[a-zA-Z0-9_\.]+$/, 
                        regexp: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                        message: '用户名只能由中文、字母、数字、和下划线组成,且不能以下划线开头与结尾'
                    },
                    remote: {
                        url: ttp_url + '',
                        message: '用户名已存在或不可用',
                        delay :  2000
                    },
                    different: {
                        field: 'password',
                        message: '用户名和密码不能彼此相同'
                    }
                }
            },
        password: {
            validators: {
                notEmpty: {
                    message: '密码是必需的,不能是空的'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: '密码必须大于6,小于30个字符长'
                },
                identical: {
                    field: 'confirmPassword',
                    message: '密码和确认密码是不一样的'
                },
                different: {
                    field: 'username',
                    message: '密码不能与用户名相同'
                }
            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    message: '确认密码是必需的,不能为空'
                },
                identical: {
                    field: 'password',
                    message: '密码和确认密码是不一样的'
                },
                different: {
                    field: 'username',
                    message: '密码不能与用户名相同'
                }
            }
        }
        }
    });

以上只是部分内容,最后效果为

表单验证插件 bootstrapValidator