- 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 // Generate a simple captcha
- 195 function randomNumber(min, max) {
- 196 return Math.floor(Math.random() * (max - min + 1) + min);
- 197 };
- 198 $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
- 199
- 200 $('#defaultForm').bootstrapValidator({
- 201 // live: 'disabled',
- 202 message: 'This value is not valid',
- 203 feedbackIcons: {
- 204 valid: 'glyphicon glyphicon-ok',
- 205 invalid: 'glyphicon glyphicon-remove',
- 206 validating: 'glyphicon glyphicon-refresh'
- 207 },
- 208 fields: {
- 209 firstName: {
- 210 validators: {
- 211 notEmpty: {
- 212 message: 'The first name is required and cannot be empty'
- 213 }
- 214 }
- 215 },
- 216 lastName: {
- 217 validators: {
- 218 notEmpty: {
- 219 message: 'The last name is required and cannot be empty'
- 220 }
- 221 }
- 222 },
- 223 username: {
- 224 message: 'The username is not valid',
- 225 validators: {
- 226 notEmpty: {
- 227 message: 'The username is required and cannot be empty'
- 228 },
- 229 stringLength: {
- 230 min: 6,
- 231 max: 30,
- 232 message: 'The username must be more than 6 and less than 30 characters long'
- 233 },
- 234 regexp: {
- 235 regexp: /^[a-zA-Z0-9_\.]+$/,
- 236 message: 'The username can only consist of alphabetical, number, dot and underscore'
- 237 },
- 238 remote: {
- 239 url: 'remote.php',
- 240 message: 'The username is not available'
- 241 },
- 242 different: {
- 243 field: 'password',
- 244 message: 'The username and password cannot be the same as each other'
- 245 }
- 246 }
- 247 },
- 248 email: {
- 249 validators: {
- 250 emailAddress: {
- 251 message: 'The input is not a valid email address'
- 252 }
- 253 }
- 254 },
- 255 password: {
- 256 validators: {
- 257 notEmpty: {
- 258 message: 'The password is required and cannot be empty'
- 259 },
- 260 identical: {
- 261 field: 'confirmPassword',
- 262 message: 'The password and its confirm are not the same'
- 263 },
- 264 different: {
- 265 field: 'username',
- 266 message: 'The password cannot be the same as username'
- 267 }
- 268 }
- 269 },
- 270 confirmPassword: {
- 271 validators: {
- 272 notEmpty: {
- 273 message: 'The confirm password is required and cannot be empty'
- 274 },
- 275 identical: {
- 276 field: 'password',
- 277 message: 'The password and its confirm are not the same'
- 278 },
- 279 different: {
- 280 field: 'username',
- 281 message: 'The password cannot be the same as username'
- 282 }
- 283 }
- 284 },
- 285 birthday: {
- 286 validators: {
- 287 date: {
- 288 format: 'YYYY/MM/DD',
- 289 message: 'The birthday is not valid'
- 290 }
- 291 }
- 292 },
- 293 gender: {
- 294 validators: {
- 295 notEmpty: {
- 296 message: 'The gender is required'
- 297 }
- 298 }
- 299 },
- 300 'languages[]': {
- 301 validators: {
- 302 notEmpty: {
- 303 message: 'Please specify at least one language you can speak'
- 304 }
- 305 }
- 306 },
- 307 'programs[]': {
- 308 validators: {
- 309 choice: {
- 310 min: 2,
- 311 max: 4,
- 312 message: 'Please choose 2 - 4 programming languages you are good at'
- 313 }
- 314 }
- 315 },
- 316 captcha: {
- 317 validators: {
- 318 callback: {
- 319 message: 'Wrong answer',
- 320 callback: function(value, validator) {
- 321 var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
- 322 return value == sum;
- 323 }
- 324 }
- 325 }
- 326 }
- 327 }
- 328 });
- 329
- 330 // Validate the form manually
- 331 $('#validateBtn').click(function() {
- 332 $('#defaultForm').bootstrapValidator('validate');
- 333 });
- 334
- 335 $('#resetBtn').click(function() {
- 336 $('#defaultForm').data('bootstrapValidator').resetForm(true);
- 337 });
- 338 });
- 339 </script>
- 340 </body>
- 341 </html>
- $('#defaultForm').bootstrapValidator('validate');
- $("#yourform").submit(function(ev){ev.preventDefault();});
- $("#submit").on("click", function(){
-
- var bootstrapValidator = $("#yourform").data('bootstrapValidator');
- bootstrapValidator.validate();
- if(bootstrapValidator.isValid())
- $("#yourform").submit();
- else return;
-
- });
经验首页