bootstrapvalidator 表单验证

前言:做Web开发的我们,表单验证是重新常表现无了之求了。友好的一无是处提示能益用户体验。博主搜索bootstrap表单验证,搜到的结果大部分还是文中的主题:bootstrapvalidator。今天即令来探视它如何运用吧。

一、源码及API地址

介绍其之前,还是吃出她的源码以及API的地方吧。

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

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

第二、代码和效能亮

1、初级用法

来拘禁bootstrapvalidator的讲述:A jQuery form validator for Bootstrap
3。从叙中我们尽管足以领略它们起码需jQuery、bootstrap的支持。我们首先引入需要之js组件

图片 1

图片 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" />

图片 3

图片 4

我们领略,既然是表单验证,那么我们在cshtml页面就不能不使发一个Form,并且我们掌握Form里面取元素都是由此name属性去取值的,所以,表单中的因素还如生一个name的属性值。

图片 5

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

图片 7

图片 8

起了表单元素之后,就是咱们的js初始化了。

图片 9

图片 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: '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    });

图片 11

图片 12

内容应该好易看懂。来拘禁效能:

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

图片 13

证通过,提交按钮恢复

图片 14

探访效果先感受下,最老长:使用简易,界面友好。下面我们来探视重叠验证。

2、中级用法

上面我们领略了非空验证的写法,除此之外肯定还有其它验证措施啊。别急,我们慢慢来拘禁。上面的代码cshtml部分未动,js部分咱略微作改:

图片 15

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

图片 17

图片 18

添加了层验证我们来拘禁效果:

图片 19

图片 20

图片 21

出于方的代码可以见到在validators属性对应一个Json对象,里面可以蕴涵多独说明的品种:

notEmpty:非空验证;

stringLength:字符串长度验证;

regexp:正则表达式验证;

emailAddress:邮箱地址验证(都毫不我们错过形容邮箱的正则了~~)

除外,在文档中我们看到她一起发生46独说明类型,我们减少几个大规模的出来看:

base64:64员编码验证;

between:验证输入值必须于有一个克值内,比如超乎10低于100;

creditCard:身份证证明;

date:日期验证;

ip:IP地址验证;

numeric:数值验证;

phone:电话号码验证;

uri:url验证;

更多证类型详见:http://bv.doc.javake.cn/validators/。当然涉及中文的印证可能会见来把小问题,园友们假如有需要可以自动下用代码测试下。

再有一个于常用之就算是submitHandler属性,它对许正在提交按钮的风波措施。使用如下:

图片 22

图片 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");
            }
        });
    });

图片 24

图片 25

在它的Demo里面介绍了过多验证的实例。我们大概看看它的功用,至于实现代码,其实大简短,有趣味之可以直接看api。

颜色验证

图片 26

Tab页表单验证

图片 27

按钮验证

图片 28

 

相关文章