1. 程式人生 > >bootstrap表單驗證插件

bootstrap表單驗證插件

label validator email ref put ida 身份證驗證 prim note

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

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

/**/

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

/**/

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

/**/

$(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: ‘郵箱地址格式有誤‘
                        }
                    }
                }
            }
        });
    });
/**/

otEmpty:非空驗證;

stringLength:字符串長度驗證;

regexp:正則表達式驗證;

emailAddress:郵箱地址驗證(都不用我們去寫郵箱的正則了~~)

除此之外,在文檔裏面我們看到它總共有46個驗證類型,我們抽幾個常見的出來看看:

base64:64位編碼驗證;

between:驗證輸入值必須在某一個範圍值以內,比如大於10小於100;

creditCard:身份證驗證;

date:日期驗證;

ip:IP地址驗證;

numeric:數值驗證;

phone:電話號碼驗證;

uri:url驗證;

更多驗證類型詳見:http://bv.doc.javake.cn/validators/。當然涉及中文的驗證可能會有些小問題,園友們如果有需要可以自行下去用代碼測試下

bootstrap表單驗證插件