bootstrapvalidator 表单验证

序言:做Web开发的大家,表单验证是再常见不过的供给了。友好的荒谬提醒能充实用户体验。博主搜索bootstrap表单验证,搜到的结果当先八分之四都以文中的核心:bootstrapvalidator。前几日就来看望它怎么样选取啊。

一、源码及API地址

介绍它前面,依旧交给它的源码以及API的地址吧。

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

boostrapvalidator api:http://bv.doc.javake.cn/api/

贰、代码以及功用显示

一、初级用法

来看bootstrapvalidator的叙说:A jQuery form validator for Bootstrap
三。从描述中大家就能够通晓它起码须要jQuery、bootstrap的支撑。我们先是引进需求的js组件

Bootstrap 1

Bootstrap 2

   <script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
    <link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

Bootstrap 3

Bootstrap 4

大家掌握,既然是表单验证,那么大家在cshtml页面就亟要求有贰个Form,并且我们驾驭Form里面取成分都是透过name属性去取值的,所以,表单里面包车型客车因素都要有1个name的属性值。

Bootstrap 5

Bootstrap 6

     <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>

Bootstrap 7

Bootstrap 8

有了表单成分之后,正是我们的js初步化了。

Bootstrap 9

Bootstrap 10

    $(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: '用户名不能为空'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    });

Bootstrap 11

Bootstrap 12

情节应当很不难看懂。来看效果:

验证通然则,提交按钮灰掉不能够点击

Bootstrap 13

表达通过,提交按钮复苏

Bootstrap 14

探望效果先感受下,最大亮点:使用简便,界面友好。上边大家来探视重叠验证。

二、中级用法

Bootstrap,地点大家清楚了非空验证的写法,除外肯定还有其余验证措施啊。别急,大家日益来看。上面的代码cshtml部分不动,js部分我们稍作修改:

Bootstrap 15

Bootstrap 16

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

Bootstrap 17

Bootstrap 18

加上了重叠验证大家来看效果:

Bootstrap 19

Bootstrap 20

Bootstrap 21

由地方的代码能够看来在validators属性对应多个Json对象,里面可以分包多个验证的花色:

notEmpty:非空验证;

stringLength:字符串长度验证;

regexp:正则表明式验证;

emailAddress:邮箱地址验证(都不要我们去写邮箱的正则了~~)

除开,在文书档案里面大家看来它壹起有四四个表明类型,大家抽多少个大规模的出来看看:

base64:6二个人编码验证;

between:验证输入值必须在某贰个限量值以内,比如超乎10紧跟于100;

creditCard:身份证验证;

date:日期验证;

ip:IP地址验证;

numeric:数值验证;

phone:电话号码验证;

uri:url验证;

越多验证类型详见:http://bv.doc.javake.cn/validators/。当然提到汉语的验证可能会有些小难题,园友们要是有亟待能够活动下去用代码测试下。

还有二个相比常用的正是submitHandler属性,它对应着提交按钮的轩然大波措施。使用如下:

Bootstrap 22

Bootstrap 23

$(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 (validator, form, submitButton) {
                alert("submit");
            }
        });
    });

Bootstrap 24

Bootstrap 25

在它的德姆o里面介绍了好多认证的实例。我们简要看看它的意义,至于完毕代码,其实相当粗略,有趣味的能够直接看api。

颜色验证

Bootstrap 26

Tab页表单验证

Bootstrap 27

按钮验证

Bootstrap 28

 

相关文章