bootstrap表單驗證插件
阿新 • • 發佈:2017-08-17
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表單驗證插件