Bootstrap表单验证插件bootstrapValidator使用方法整理
Posted 暖风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap表单验证插件bootstrapValidator使用方法整理相关的知识，希望对你有一定的参考价值。
插件介绍
先上一个图：
下载地址：https://github.com/nghuuphuoc/bootstrapvalidator
使用方法：http://www.cnblogs.com/huangcong/p/5335376.html
使用提示
中文化：
下载插件后，将\\js\\bootstrapValidator\\language\\zh_CN.js 引入文件，即实现中文化
提交前验证表单：
更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BootstrapValidator demo</title> 5 6 <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/> 7 <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/> 8 9 <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome --> 10 <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />--> 11 12 <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script> 13 <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> 14 <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script> 15 </head> 16 <body> 17 <div class="container"> 18 <div class="row"> 19 <!-- form: --> 20 <section> 21 <div class="col-lg-8 col-lg-offset-2"> 22 <div class="page-header"> 23 <h2>Sign up</h2> 24 </div> 25 26 <form id="defaultForm" method="post" class="form-horizontal" action="target.php"> 27 <div class="form-group"> 28 <label class="col-lg-3 control-label">Full name</label> 29 <div class="col-lg-4"> 30 <input type="text" class="form-control" name="firstName" placeholder="First name" /> 31 </div> 32 <div class="col-lg-4"> 33 <input type="text" class="form-control" name="lastName" placeholder="Last name" /> 34 </div> 35 </div> 36 37 <div class="form-group"> 38 <label class="col-lg-3 control-label">Username</label> 39 <div class="col-lg-5"> 40 <input type="text" class="form-control" name="username" /> 41 </div> 42 </div> 43 44 <div class="form-group"> 45 <label class="col-lg-3 control-label">Email address</label> 46 <div class="col-lg-5"> 47 <input type="text" class="form-control" name="email" /> 48 </div> 49 </div> 50 51 <div class="form-group"> 52 <label class="col-lg-3 control-label">Password</label> 53 <div class="col-lg-5"> 54 <input type="password" class="form-control" name="password" /> 55 </div> 56 </div> 57 58 <div class="form-group"> 59 <label class="col-lg-3 control-label">Retype password</label> 60 <div class="col-lg-5"> 61 <input type="password" class="form-control" name="confirmPassword" /> 62 </div> 63 </div> 64 65 <div class="form-group"> 66 <label class="col-lg-3 control-label">Gender</label> 67 <div class="col-lg-5"> 68 <div class="radio"> 69 <label> 70 <input type="radio" name="gender" value="male" /> Male 71 </label> 72 </div> 73 <div class="radio"> 74 <label> 75 <input type="radio" name="gender" value="female" /> Female 76 </label> 77 </div> 78 <div class="radio"> 79 <label> 80 <input type="radio" name="gender" value="other" /> Other 81 </label> 82 </div> 83 </div> 84 </div> 85 86 <div class="form-group"> 87 <label class="col-lg-3 control-label">Birthday</label> 88 <div class="col-lg-5"> 89 <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD) 90 </div> 91 </div> 92 93 <div class="form-group"> 94 <label class="col-lg-3 control-label">Languages</label> 95 <div class="col-lg-5"> 96 <div class="checkbox"> 97 <label> 98 <input type="checkbox" name="languages[]" value="english" /> English 99 </label> 100 </div> 101 <div class="checkbox"> 102 <label> 103 <input type="checkbox" name="languages[]" value="french" /> French 104 </label> 105 </div> 106 <div class="checkbox"> 107 <label> 108 <input type="checkbox" name="languages[]" value="german" /> German 109 </label> 110 </div> 111 <div class="checkbox"> 112 <label> 113 <input type="checkbox" name="languages[]" value="russian" /> Russian 114 </label> 115 </div> 116 <div class="checkbox"> 117 <label> 118 <input type="checkbox" name="languages[]" value="other" /> Other 119 </label> 120 </div> 121 </div> 122 </div> 123 124 <div class="form-group"> 125 <label class="col-lg-3 control-label">Programming Languages</label> 126 <div class="col-lg-5"> 127 <div class="checkbox"> 128 <label> 129 <input type="checkbox" name="programs[]" value="net" /> .Net 130 </label> 131 </div> 132 <div class="checkbox"> 133 <label> 134 <input type="checkbox" name="programs[]" value="java" /> Java 135 </label> 136 </div> 137 <div class="checkbox"> 138 <label> 139 <input type="checkbox" name="programs[]" value="c" /> C/C++ 140 </label> 141 </div> 142 <div class="checkbox"> 143 <label> 144 <input type="checkbox" name="programs[]" value="php" /> PHP 145 </label> 146 </div> 147 <div class="checkbox"> 148 <label> 149 <input type="checkbox" name="programs[]" value="perl" /> Perl 150 </label> 151 </div> 152 <div class="checkbox"> 153 <label> 154 <input type="checkbox" name="programs[]" value="ruby" /> Ruby 155 </label> 156 </div> 157 <div class="checkbox"> 158 <label> 159 <input type="checkbox" name="programs[]" value="python" /> Python 160 </label> 161 </div> 162 <div class="checkbox"> 163 <label> 164 <input type="checkbox" name="programs[]" value="javascript" /> Javascript 165 </label> 166 </div> 167 </div> 168 </div> 169 170 <div class="form-group"> 171 <label class="col-lg-3 control-label" id="captchaOperation"></label> 172 <div class="col-lg-2"> 173 <input type="text" class="form-control" name="captcha" /> 174 </div> 175 </div> 176 177 <div class="form-group"> 178 <div class="col-lg-9 col-lg-offset-3"> 179 <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button> 180 <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button> 181 <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button> 182 <button type="button" class="btn btn-info" id="resetBtn">Reset form</button> 183 </div> 184 </div> 185 </form> 186 </div> 187 </section> 188 <!-- :form --> 189 </div> 190 </div> 191 192 <script type="text/javascript"> 193 $(document).ready(function() { 194 Bootstrap表单验证插件bootstrapValidator使用方法整理bootstrapValidator.js，最好用的bootstrap表单验证插件 简单实用方法
jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法
boostrap表单验证插件-bootstrapValidator
在 Symfony v5.2 项目中使用 Jquery-validaton v1.19.3 + Bootstrap v4.6 进行输入验证