Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use bootstrap-validator". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The required js, css and img are all explained below, read patiently!

Required js file: jquery.min.js,bootstrapValidator.min.js,bootstrap-validator-default.js (a custom default profile, written by an individual, unofficial file)

Both of the first two files are available on cdn, and the bootstrap-validator-default.js content is as follows:

/ * default rule start*///ip format $.fn.bootstrapValidator.validators.IP = {/ / message: "incorrect ip format"

Validate:function (validator,$field,options) {varvalue=$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-5]) 4]\ d | 1\ d {2} | [1-9]?\ d) $/ If (value==='') {returntrue

} returnipReg.test (value)

}

}; / / password format $.fn.bootstrapValidator.validators.pw = {/ / message: "must contain numbers, letters, special characters"

Validate:function (validator,$field,options) {varvalue=$field.val ()

IpReg=/.* (? =. *\ d) (? =. * [a-zA-Z]) (? =. * [~! @ # $% ^ & * _]). /

If (typeofvaluevaluevalues) returnfalse (value) {returnfalse

} returntrue

}

}; / / spaces are not allowed $.fn.bootstrapValidator.validators.noSpace = {/ / message: "must contain numbers, letters, special characters"

Validate:function (validator,$field,options) {varvalue=$field.val (); if (people's returnfalse (valuevalues) has been asked to string'| | value.indexOf ('') >-1) {returnfalse

} returntrue

}

}; / / Gateway format $.fn.bootstrapValidator.validators.mask = {/ / message: "Gateway unreachable"

Validate:function (validator,$field,options) {varipArr=$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

IAccordant if (ipArr.principthroomsprinlen | | gatewayArr.roomthroomroomprinciplen | | netmaskArr.roomthroomroomprinciplen) {returnfalse

} for (; iTheBootstrapValidatorinstance

/ / data.field-- > Thefieldname

/ / data.element-- > Thefieldelement

/ / Getthemessagesoffield

Varfield=data.field;varmessages=data.bv.getMessages (data.element); / / Removethefieldmessagesifthey'realreadyavailable

$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.validators.notEmpty & & messages.indexOf (config.fields[ data.field] .validators.notEmpty.message) >-1) {

Item.removeClass ('success'). AddClass (' error')

} else {

Item.removeClass ('error'). AddClass (' success')

}

}) / / Hidethedefaultmessage

/ / $field.data ('bv.messages') returnsthedefaultelementcontainingthemessages

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 (); returnfalse

})

}

ValiFields:function (fields) {/ / verify that the fields is verified. If it fails, the message will be prompted.

Varstatus=true

FieldStatus,$errField,$errFiePar,$totalTip

Fields=fields.fields | | fields;if (! fields) returnfalse;for (varfieldinfields) {

$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 (''+ Fields [field] .message +'')

}

}

Status=status&&fieldStatus=='success'

} returnstatus

}

})

Required css file: bootstrap-validator-my.css (a custom default profile, written by an individual, unofficial file)

The bootstrap-validator-my.css content is as follows:

* {margin:0;padding:0;box-sizing:border-box

} input,button {outline:none

} ul {list-style:none

} / * font style * / .text-right {text-align:right

}. Text-left {text-align:left

}. Text-center,.center {text-align:center

} .bold {font-weight:bold

} / * location style * / .relative {position:relative

} .absolute {position:absolute

} .fixed {position:fixed

} / * float dependent * / .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%

} / * panelstart*/.panel {border:1pxsolid#6AC7DC;border-radius:4px;background:#fff

} .panel > div:first-child {border-bottom:1pxsolid#6AC7DC;height:35px;line-height:35px;border-radius:4px

}. Panel.panel-head {padding:020px;position:relative

} .panel.panel-head.panel-title {font-weight:bold

} .panel.panel-head.panel-btns {position:absolute;right:20px

} .panel.panel-head.panel-btnsspan {border-radius:5px;color:#fff;padding:2px8px

} .panel.panel-head.panel-btnsspan: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-tabletd,.panel.panel-body.panel-tableth {border:1pxsolid#E0E0E0;font-size:14px;padding:08px;font-style:normal

} .panel.panel-body.panel-tableth {height:33px;line-height:33px

} .panel.panel-body.panel-tabletd {height:28px;line-height:28px

} / * panelend*//* all form element styles start*/.form {display:flex;justify-content:center;padding:20px

}. Form.item-txt,.form.item-sel {width:300px;height:30px;line-height:30px;border:1pxsolid#CCCCCC;padding:010px

}. 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:1pxsolid#ddd;box-shadow:1px1px1px#efefef;background:#f9f9f9;padding:5px10px;z-index:100

} .form.errorsli {line-height:20px;padding-left:18px;font-size:12px;color:#666;font-family:Tahoma,Helvetica, "MicrosoftYahei", "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:6pxsolidtransparent;border-right:6pxsolid#ddd;border-bottom:6pxsolidtransparent

} .form.errors.arrow: after {content:'';position:absolute;top:-5px;left:1px;border-top:5pxsolidtransparent;border-right:5pxsolid#f9f9f9;border-bottom:5pxsolidtransparent

} .form.errorsli.normal {background-position:-86px-112px

} .form.errorsli.success {background-position:-86px-128px

} .form.errorsli.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

} / * all form element styles end*/

The required img is:

3.png

Bootstrap-validator-my

User name:

Ip:

Password:

New password:

Confirm password:

Confirm registration

Varconfig= {fields: {/ * Verification: rules * /

Username: {/ / verify input entries: validation rules

Message:'Theusernameisnotvalid',validators: {stringLength: {min:6,max:30,message:' username length must be between 6 and 30'

}, regexp: {regexp:/ ^ [a-zA-Z0-9 _\.] + $/, message:' user name is underlined by numbers and letters. Make up'

}, notEmpty: {message:' user name cannot be empty'

}

}

}, ip: {message:'ip is invalid', validators: {ip: {message:'ip format is incorrect'

}

}

}, password: {invalid message:' password'

Validators: {pw: {/ / regexp:/.* (? = .*\ d) (? = .* [a-zA-Z]) (? = .* [~! @ # $% ^ & * _]). /

Message:' must contain numbers, letters, and special characters'

}, stringLength: {min:8,message:' password length must be greater than or equal to 8 characters'

}

}

}, newpassword: {message:' password is invalid', validators: {regexp: {regexp:/.* (? =. *\ d) (? =. * [a-zA-Z]) (? =. * [~! @ # $% ^ & * _]). /, message:' password failed'

}, stringLength: {min:8,message:' password length must be greater than or equal to 8 characters'

}, different: {/ / cannot be the same as the user name

The inputname value that field:'password',// needs to compare

The new message:' password cannot be the same as the old password'

}, identical: {/ / same

The inputname value that field:'repassword',// needs to compare

The new message:' password and confirmation password should be the same.

}

}

}, repassword: {message:' password is invalid', validators: {regexp: {regexp:/.* (? =. *\ d) (? =. * [a-zA-Z]) (? =. * [~! @ # $% ^ & * _]). /, message:' password failed'

}, stringLength: {min:8,message:' password length must be greater than or equal to 8 characters'

}, different: {/ / cannot be the same as the user name

The inputname value that field:'password',// needs to compare

Message:' confirms that the password cannot be the same as the old password'

}, identical: {/ / same

The inputname value that field:'newpassword',// needs to compare

The new message:' password and confirmation password should be the same.

}

}

}

}

}; 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)

}

})

This is the end of "how to use bootstrap-validator". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.