How to use bootstrap-validator
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!
