這篇文章主要介紹bootstrap-validator的使用示例,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
十載的潼關(guān)網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整潼關(guān)建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“潼關(guān)網(wǎng)站設(shè)計(jì)”,“潼關(guān)網(wǎng)站推廣”以來(lái),每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
需要的js、css和img在下面都有說(shuō)明,耐心點(diǎn)讀!
需要的js文件: jquery.min.js,bootstrapValidator.min.js,bootstrap-validator-default.js(自定義的一個(gè)默認(rèn)配置文件,是個(gè)人寫的,非官方文件)
前兩個(gè)文件cdn上都有,bootstrap-validator-default.js內(nèi)容如下:
/*默認(rèn)規(guī)則 start*///ip格式$.fn.bootstrapValidator.validators.ip = { //message: "ip格式不正確" validate: function(validator, $field, options) { var value = $field.val(), ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/; if (value === '') { return true; } return ipReg.test(value); } };//password格式$.fn.bootstrapValidator.validators.pw = { //message: "必須包含數(shù)字、英文字母、特殊字符" validate: function(validator, $field, options) { var value = $field.val(), ipReg = /.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./; if (typeof value != 'string' || !ipReg.test(value)) { return false; } return true; } };//不允許有空格$.fn.bootstrapValidator.validators.noSpace = { //message: "必須包含數(shù)字、英文字母、特殊字符" validate: function(validator, $field, options) { var value = $field.val(); if (typeof value != 'string' || value.indexOf(' ') > -1) { return false; } return true; } };//網(wǎng)關(guān)格式$.fn.bootstrapValidator.validators.mask = { //message: "網(wǎng)關(guān)不可達(dá)" validate: function(validator, $field, options) { var ipArr = $field.parent().parent().find('input[name="ip"]').val().split('.'), gatewayArr = $field.parent().parent().find('input[name="gateway"]').val().split('.'), value = $field.val(), netmaskArr = value.split('.'), len = 4, i = 0; if (ipArr.length !== len || gatewayArr.length !== len || netmaskArr.length !== len) { return false; } for (; i < len; i++) { if ((ipArr[i] & netmaskArr[i]) !== (gatewayArr[i] & netmaskArr[i])) { return false; } } return true; } };//郵箱 表單驗(yàn)證規(guī)則$.fn.bootstrapValidator.validators.mail = { //message: "郵箱格式不正確" validate: function(validator, $field, options) { var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/, value = $field.val(); return mail.test(value); } };//電話驗(yàn)證規(guī)則$.fn.bootstrapValidator.validators.phone = { //message: "0371-68787027" validate: function(validator, $field, options) { var phone = /^0\d{2,3}-\d{7,8}$/, value = $field.val(); return phone.test(value); } };//區(qū)號(hào)驗(yàn)證規(guī)則$.fn.bootstrapValidator.validators.ac = { //message: "區(qū)號(hào)如:010或0371" validate: function(validator, $field, options) { var ac = /^0\d{2,3}$/, value = $field.val(); return ac.test(value); } };//無(wú)區(qū)號(hào)電話驗(yàn)證規(guī)則$.fn.bootstrapValidator.validators.noactel = { //message: "電話格式如:68787027" validate: function(validator, $field, options) { var noactel = /^\d{7,8}$/, value = $field.val(); return noactel.test(value); } };/*默認(rèn)規(guī)則 end*/$.fn.extend({ initBV: function(config) { //初始化函數(shù) if (this.length == 0 || this[0].tagName !== 'FORM') { return false; } var $form = this.eq(0), $inputs = $form.find('input'), $errors = $form.find('.errors'), $itemBtn = $form.find('.item-btn'); //讓ul.errors中顯示驗(yàn)證項(xiàng) function initTips(fields) { var validator, notEmpty, $errField; fields = fields.fields || fields; if (!fields) return false; for (var field in fields) { $errField = $form.find('#errors-' + field); $errField.hide().find('li').remove(); validators = fields[field].validators; notEmpty = false; for (var vali in validators) { $('<li/>') .addClass('text-left') .attr('data-field', field) .attr('data-vali', vali) .html(validators[vali].message) .appendTo($errField); if (vali == 'notEmpty') { notEmpty = true; } } if (notEmpty) { $errField.data('status', 'error'); } else { $errField.data('status', 'success'); } } return false; } initTips(config.fields); $form.bootstrapValidator(config) .on('success.form.bv', function(e, data) { //點(diǎn)擊提交之后 // Prevent form submission e.preventDefault(); return false; }).on('success.field.bv', function(e, data) { var removeClass, successClass; if (data.element[0].value) { //驗(yàn)證成功 console.log('real success') removeClass = 'error'; addClass = 'success'; } else { //驗(yàn)證的其實(shí)是''(空字符串),但也被算是success事件 console.log('not success'); removeClass = 'error success'; addClass = 'normal'; } $errors.hide(); $form.find('#errors-' + data.field).show().data('status', 'success').find('li').each(function(idx, item) { $(item).removeClass(removeClass).addClass(addClass); }); }).on('error.field.bv', function(e, data) { // data.bv --> The BootstrapValidator instance // data.field --> The field name // data.element --> The field element // Get the messages of field var field = data.field; var messages = data.bv.getMessages(data.element); // Remove the field messages if they're already available $errors.hide(); $form.find('#errors-' + data.field).show().data('status', 'error').find('li').each(function(idx, item) { item = $(item); if (messages.indexOf(item.text().replace('&', '&')) > -1 || config.fields[data.field].validators.notEmpty && messages.indexOf(config.fields[data.field].validators.notEmpty.message) > -1) { item.removeClass('success').addClass('error'); } else { item.removeClass('error').addClass('success'); } }); // Hide the default message // $field.data('bv.messages') returns the default element containing the messages data.element .data('bv.messages') .find('.help-block[data-bv-for="' + data.field + '"]') .hide(); }); $inputs.blur(function(e) { $errors.hide(); }) $inputs.focus(function(e) { $errors.hide(); $(this).trigger('input'); $(this).parent().find('.totalTip').hide(); $form.find('#errors-' + this.name).show(); }) $itemBtn.click(function(e) { e.preventDefault(); $form.find('input').trigger('input'); $('.errors').hide(); return false; }); }, valiFields: function(fields) { //驗(yàn)證fields是否驗(yàn)證通過(guò),未通過(guò)則提示信息 var status = true, fieldStatus, $errField, $errFiePar, $totalTip; fields = fields.fields || fields; if (!fields) return false; for (var field in fields) { $errField = $('#errors-' + field); fieldStatus = $errField.data('status'); if (fieldStatus == 'error') { $errFiePar = $errField.parent(), $totalTip = $errFiePar.find('.totalTip'); if ($totalTip.length) { $totalTip.show(); } else { $errFiePar.append('<span class="totalTip text-left">' + fields[field].message + '</span>'); } } status = status && fieldStatus == 'success'; } return status; } });
需要的css文件: bootstrap-validator-my.css(自定義的一個(gè)默認(rèn)配置文件,是個(gè)人寫的,非官方文件)
bootstrap-validator-my.css內(nèi)容如下:
* { margin: 0; padding: 0; box-sizing: border-box; }input,button { outline: none; }ul { list-style: none; }/*字體樣式*/.text-right { text-align: right; }.text-left { text-align: left; }.text-center,.center { text-align: center; }.bold { font-weight: bold; }/*位置樣式*/.relative { position: relative; }.absolute { position: absolute; }.fixed { position: fixed; }/*浮動(dòng)相關(guān)*/.float,.float-left { float: left; }.float-right { float: right; }.clear:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; }.pageWrap { height: auto; min-height: 100%; }/*panel start*/.panel { border: 1px solid #6AC7DC; border-radius: 4px; background: #fff; }.panel>div:first-child { border-bottom: 1px solid #6AC7DC; height: 35px; line-height: 35px; border-radius: 4px; }.panel .panel-head { padding: 0 20px; position: relative; }.panel .panel-head .panel-title { font-weight: bold; }.panel .panel-head .panel-btns { position: absolute; right: 20px; }.panel .panel-head .panel-btns span { border-radius: 5px; color: #fff; padding: 2px 8px; }.panel .panel-head .panel-btns span:hover { cursor: pointer; }.panel .panel-head .panel-btns .panel-btn-add { background: #3686D1; }.panel .panel-body { padding: 20px; }.panel .panel-body .panel-table { width: 100%; border-collapse: collapse; text-align: center; }.panel .panel-body .panel-table td,.panel .panel-body .panel-table th { border: 1px solid #E0E0E0; font-size: 14px; padding: 0 8px; font-style: normal; }.panel .panel-body .panel-table th { height: 33px; line-height: 33px; }.panel .panel-body .panel-table td { height: 28px; line-height: 28px; }/*panel end*//*所有表單元素樣式 start*/.form { display: flex; justify-content: center; padding: 20px; }.form .item-txt,.form .item-sel { width: 300px; height: 30px; line-height: 30px; border: 1px solid #CCCCCC; padding: 0 10px; }.form .item-dis { background: #E3E3E3; color: #999999; }.form .item-dis:hover { cursor: not-allowed; }.form .item { font-size: 0; position: relative; margin-bottom: 15px; }.form .totalTip { position: absolute; left: 386px; top: 0; width: 235px; height: 30px; line-height: 30px; color: red; }.form .errors { width: 235px; position: absolute; left: 386px; top: 0; border: 1px solid #ddd; box-shadow: 1px 1px 1px #efefef; background: #f9f9f9; padding: 5px 10px; z-index: 100; }.form .errors li { line-height: 20px; padding-left: 18px; font-size: 12px; color: #666; font-family: Tahoma,Helvetica,"Microsoft Yahei","微軟雅黑",Arial,STHeiti; background: url(reg_icons.png) no-repeat -86px -112px; }.form .errors .arrow { position: absolute; top: 8px; left: -6px; height: 0px; width: 0px; border-top: 6px solid transparent; border-right: 6px solid #ddd; border-bottom: 6px solid transparent; }.form .errors .arrow:after { content: ''; position: absolute; top: -5px; left: 1px; border-top: 5px solid transparent; border-right: 5px solid #f9f9f9; border-bottom: 5px solid transparent; }.form .errors li.normal { background-position: -86px -112px; }.form .errors li.success { background-position: -86px -128px; }.form .errors li.error { background-position: -86px -144px; color: red; }.form .item * { font-size: 14px; }.form .item .item-label { display: inline-block; }.form .item .item-btn { height: 30px; width: 300px; line-height: 30px; display: inline-block; background: #3686D1; color: #fff; font-weight: bold; text-align: center; }.form .item .item-btn:hover { cursor: pointer; }.form .error-cont { color: gray; display: inline-block; text-align: left; font-size: 12px; height: 15px; position: relative; white-space: nowrap; }.form .error-cont .icon { position: absolute; top: 1px; }.form .error-cont .tip { position: absolute; left: 20px; font-size: 12px; }.form .redtip { color: red; font-weight: bold; display: inline-block; height: 30px; line-height: 30px; }/*所有表單元素樣式 end*/
需要的img為:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>bootstrap-validator-my</title> <link rel="stylesheet" href="bootstrap-validator-my.css"> </head><body> <div class="panel"> <div class="panel-head"> </div> <div class="panel-body"> <form id="defaultForm" role="form" class="form-signin form" action="registerAccount.do" method="post"> <div class="text-right"> <div class="form-group item"> <label class="item-label" for="username">用戶名:</label> <input class="form-control item-txt" type="text" name="username" id="username" /> <ul id="errors-username" data-status="" class="errors" style="display: none;"> <span class="arrow"></span> </ul> </div> <div class="form-group item"> <label class="item-label" for="ip">ip:</label> <input class="form-control item-txt" type="text" name="ip" id="ip" /> <ul id="errors-ip" data-status="" class="errors" style="display: none;"> <span class="arrow"></span> </ul> </div> <div class="form-group item"> <label class="item-label" for="password">密碼:</label> <input class="form-control item-txt" type="password" name="password" id="password" /> <ul id="errors-password" data-status="" class="errors" style="display: none;"> <span class="arrow"></span> </ul> </div> <div class="form-group item"> <label class="item-label" for="newpassword">新密碼:</label> <input class="form-control item-txt" type="password" name="newpassword" id="newpassword" /> <ul id="errors-newpassword" data-status="" class="errors" style="display: none;"> <span class="arrow"></span> </ul> </div> <div class="form-group item"> <label class="item-label" for="repassword">確認(rèn)密碼:</label> <input class="form-control item-txt" type="password" name="repassword" id="repassword" /> <ul id="errors-repassword" data-status="" class="errors" style="display: none;"> <span class="arrow"></span> </ul> </div> <div class="form-group item"> <span class="item-btn" type="submit">確認(rèn)注冊(cè)</span> </div> </div> </form> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <script src="bootstrap-validator-default.js"></script> <script> var config = { fields: { /*驗(yàn)證:規(guī)則*/ username: { //驗(yàn)證input項(xiàng):驗(yàn)證規(guī)則 message: 'The username is not valid', validators: { stringLength: { min: 6, max: 30, message: '用戶名長(zhǎng)度必須在6到30之間' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用戶名由數(shù)字字母下劃線和.組成' }, notEmpty: { message: '用戶名不能為空' } } }, ip: { message: 'ip無(wú)效', validators: { ip: { message: 'ip格式不正確' } } }, password: { message: '密碼無(wú)效', validators: { pw: { // regexp: /.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./, message: '必須包含數(shù)字、英文字母、特殊字符' }, stringLength: { min: 8, message: '密碼長(zhǎng)度須大于等于8位' } } }, newpassword: { message: '密碼無(wú)效', validators: { regexp: { regexp: /.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./, message: '密碼沒(méi)通過(guò)' }, stringLength: { min: 8, message: '密碼長(zhǎng)度須大于等于8位' }, different: { //不能和用戶名相同 field: 'password', //需要進(jìn)行比較的input name值 message: '新密碼不能和舊密碼相同' }, identical: { //相同 field: 'repassword', //需要進(jìn)行比較的input name值 message: '新密碼和確認(rèn)密碼要一致' } } }, repassword: { message: '密碼無(wú)效', validators: { regexp: { regexp: /.*(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*_])./, message: '密碼沒(méi)通過(guò)' }, stringLength: { min: 8, message: '密碼長(zhǎng)度須大于等于8位' }, different: { //不能和用戶名相同 field: 'password', //需要進(jìn)行比較的input name值 message: '確認(rèn)密碼不能和舊密碼相同' }, identical: { //相同 field: 'newpassword', //需要進(jìn)行比較的input name值 message: '新密碼和確認(rèn)密碼要一致' } } } } }; var $form = $('#defaultForm'); $form.initBV(config); $form.find('.item-btn').click(function(e) { if($form.valiFields(config.fields)) { console.log(1) }else { console.log(0) } }); </script></body></html>
相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!
用<h2>和段落<p> 寫一個(gè)三毛語(yǔ)錄
以上是“bootstrap-validator的使用示例”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站欄目:bootstrap-validator的使用示例
轉(zhuǎn)載來(lái)源:http://muchs.cn/article40/pdgpho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、企業(yè)建站、面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)