SoFunction
Updated on 2025-03-10

BootStrap form validation instance code

Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.

Let me share with you the bootstrap form verification example code, the specific code is as follows:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ include file="../include/"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../include/" %>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="../../css/">
<link rel="stylesheet" href="">
<title>Form Testing</title>
</head>
<body class="no-skin">
<div class="main-container" >
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form  class="form-horizontal" role="form">
   <div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">Username:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="username" class="col-xs-12 col-sm-12 col-md-12" placeholder="User Name"/>
</div>
</div>
</div>
<!-- Birthday-->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">Birthday:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="birthday" class="col-xs-12 col-sm-12 col-md-12" placeholder="Birthday"/>
</div>
</div>
</div>
<!-- mail -->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">mail:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="email" class="col-xs-12 col-sm-12 col-md-12" placeholder="mail"/>
</div>
</div>
</div>
<!-- password -->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">password:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="password" class="col-xs-12 col-sm-12 col-md-12" placeholder="password"/>
</div>
</div>
</div>
<!-- 确认password -->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">确认password:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="confirmPassword" class="col-xs-12 col-sm-12 col-md-12" placeholder="Confirm Password"/>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right">language:</label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="checkbox"  name="languages" value="Chinese" style="margin-top:12px"/>Chinese
</div>
 <div>
<input type="checkbox"  name="languages" value="English" style="margin-top:12px"/>English
</div>
 <div>
<input type="checkbox"  name="languages" value="German" style="margin-top:12px"/>German
 </div>
 <div>
<input type="checkbox"  name="languages" value="Korean" style="margin-top:12px"/>Korean
 </div>
</div>
</div>
<!-- Customize -->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right" ></label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text"  name="callbacktest" class="col-xs-12 col-sm-12 col-md-12" placeholder="Customized"/>
</div>
</div>
</div>
</form>
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content-inner -->
</div><!-- /.main-content -->
<div class="clear-div"></div>
<div class="footer-button-box container" >
<div class="button-conent">
  <button class="btn" type="button" >
submit
</button>
<button class="btn" type="button" >
Reset
</button>
</div><!-- /.button-conent -->
</div><!-- /.footer-button-box -->
</div><!-- /.main-container -->
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 $(function () {
//Reset$('#resetBtn').click(function(){
//Clear the form verification content$('#formTest')[0].reset();
//Clear the form verification information$('#formTest').bootstrapValidator('resetForm');
});
function randomNumber(min, max) {
     return (() * (max - min + 1) + min);
    };
   $('#callbackshow').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
   //check$('#formTest').bootstrapValidator({
    message : '',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
    },
    //Verify user name    fields: {
username: {
  message: 'Username verification failed',
validators: {
 notEmpty: {
    message: 'Username cannot be empty'
 },
 stringLength: {
  min: 2,
max: 4,
message: 'The length of the name can only be 2-4 digits'
 },
 regexp: {
  regexp: /^[\u2E80-\u9FFF]+$/,
  message: 'Only for Chinese characters'
 },
}
},//end username
birthday:{
  validators: {
   notEmpty: {
    message: 'Birthday cannot be empty'
   },
 date:{
  format: 'YYYY/MM/DD',
message:'Enter the correct date format, YYYY/MM/DD'
 }
 }
  },//end birthday
//Verify email  email: {
  validators: {
   notEmpty: {
    message: 'The email address cannot be empty'
   },
 emailAddress: {
message: 'The email address is incorrect'
 }
  }
 },//end email
  password:{
 validators: {
   notEmpty: {
    message: 'Password cannot be empty'
   }, 
 stringLength: {
  min: 6,
max: 15,
message: 'The minimum password length is 6 and up to 15'
 },
 regexp: {
 regexp: /^[\d]+$/,
 message: 'Only for numbers'
 },
}
 },//end password
confirmPassword:{
 validators: {
  notEmpty: {
  message: 'Password cannot be empty'
}, 
stringLength: {
  min: 6,
  max: 15,
  message: 'The minimum password length is 6 and up to 15'
},
identical: {
          field: 'password',
          message: '2 times passwords are inconsistent'
        },
}
},//end confirmPassword
'languages': {
        validators: {
          notEmpty: {
            message: 'Select at least one'
          },
choice: {
            min: 2,
            max: 3,
            message: 'Select 2-3'
          }
       }
     },//end languages
     callbacktest:{
 validators: {
callback:{
message:'Enter error',
callback:function(value,validator){
var items = $('#callbackshow').html().split(' '), 
sum = parseInt(items[0]) + parseInt(items[2]);
(sum);
return value == sum;
}
}
  }
},//end callbacktest
    }
  });

//Form Submit$("#formTest").submit(function(ev){();});
$("#submitBtn").on("click", function(){
var bootstrapValidator = $("#formTest").data('bootstrapValidator');
();
if(()){
$.ajaxRequest({
url : '',
  });
}else{
return; 
}
}); 
 });

The above is the BootStrap form verification example code introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!