BootStrap表单验证实例代码


Posted in Javascript onJanuary 13, 2017

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

下面给大家分享bootstrap表单验证实例代码,具体代码如下所示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ include file="../include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="../include/common.jsp" %>
<script type="text/javascript" src="form.js"></script>
<script type="text/javascript" src="bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="../../css/edit.css">
<link rel="stylesheet" href="bootstrapValidator.min.css">
<title>表单测试</title>
</head>
<body class="no-skin">
<div class="main-container" id="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 id="formTest" class="form-horizontal" role="form">
   <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" id="username" name="username" class="col-xs-12 col-sm-12 col-md-12" placeholder="用户姓名"/>
</div>
</div>
</div>
<!-- 生日-->
<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" id="birthday" name="birthday" class="col-xs-12 col-sm-12 col-md-12" placeholder="生日"/>
</div>
</div>
</div>
<!-- 邮件 -->
<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" id="email" name="email" class="col-xs-12 col-sm-12 col-md-12" placeholder="邮件"/>
</div>
</div>
</div>
<!-- 密码 -->
<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" id="password" name="password" class="col-xs-12 col-sm-12 col-md-12" placeholder="密码"/>
</div>
</div>
</div>
<!-- 确认密码 -->
<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" id="confirmPassword" name="confirmPassword" class="col-xs-12 col-sm-12 col-md-12" placeholder="确认密码"/>
</div>
</div>
</div>
<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="checkbox" id="languages" name="languages" value="中文" style="margin-top:12px"/>中文
</div>
 <div>
<input type="checkbox" id="languages" name="languages" value="英语" style="margin-top:12px"/>英语
</div>
 <div>
<input type="checkbox" id="languages" name="languages" value="德语" style="margin-top:12px"/>德语
 </div>
 <div>
<input type="checkbox" id="languages" name="languages" value="韩语" style="margin-top:12px"/>韩语
 </div>
</div>
</div>
<!-- 自定义 -->
<div class="form-group">
<label class="col-xs-3 col-sm-3 col-md-5 no-padding-right" id="callbackshow"></label>
<div class="col-xs-3 col-sm-3 col-md-3">
<div>
<input type="text" id="callbacktest" name="callbacktest" class="col-xs-12 col-sm-12 col-md-12" placeholder="自 定 义"/>
</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" id="submitBtn">
提交
</button>
<button class="btn" type="button" id="resetBtn">
重置
</button>
</div><!-- /.button-conent -->
</div><!-- /.footer-button-box -->
</div><!-- /.main-container -->
</body>
</html>

--------------------------------------------------引入js----------------------------------------------------------------------

$(function () {
//重置
$('#resetBtn').click(function(){
//清空表单验证内容
$('#formTest')[0].reset();
//清空表单验证信息
$('#formTest').bootstrapValidator('resetForm');
});
function randomNumber(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
    };
   $('#callbackshow').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
   //校验
$('#formTest').bootstrapValidator({
    message : '',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
    },
    //验证用户名字
    fields: {
username: {
  message: '用户名验证失败',
validators: {
 notEmpty: {
    message: '用户名不能为空'
 },
 stringLength: {
  min: 2,
max: 4,
message: '名字长度只能为2-4位'
 },
 regexp: {
  regexp: /^[\u2E80-\u9FFF]+$/,
  message: '只能为汉字'
 },
}
},//end username
birthday:{
  validators: {
   notEmpty: {
    message: '生日不能为空'
   },
 date:{
  format: 'YYYY/MM/DD',
message:'输入正确的日期格式,YYYY/MM/DD'
 }
 }
  },//end birthday
//验证email
  email: {
  validators: {
   notEmpty: {
    message: '邮箱地址不能为空'
   },
 emailAddress: {
message: '邮箱地址不对'
 }
  }
 },//end email
  password:{
 validators: {
   notEmpty: {
    message: '密码不能为空'
   }, 
 stringLength: {
  min: 6,
max: 15,
message: '密码长度最小为6最多为15'
 },
 regexp: {
 regexp: /^[\d]+$/,
 message: '只能为数字'
 },
}
 },//end password
confirmPassword:{
 validators: {
  notEmpty: {
  message: '密码不能为空'
}, 
stringLength: {
  min: 6,
  max: 15,
  message: '密码长度最小为6最多为15'
},
identical: {
          field: 'password',
          message: '2次密码不一致'
        },
}
},//end confirmPassword
'languages': {
        validators: {
          notEmpty: {
            message: '至少要选择一个'
          },
choice: {
            min: 2,
            max: 3,
            message: '选择2-3个'
          }
       }
     },//end languages
     callbacktest:{
 validators: {
callback:{
message:'输入错误',
callback:function(value,validator){
var items = $('#callbackshow').html().split(' '), 
sum = parseInt(items[0]) + parseInt(items[2]);
console.log(sum);
return value == sum;
}
}
  }
},//end callbacktest
    }
  });

//表单提交
$("#formTest").submit(function(ev){ev.preventDefault();});
$("#submitBtn").on("click", function(){
var bootstrapValidator = $("#formTest").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid()){
$.ajaxRequest({
url : 'www.baidu.com',
  });
}else{
return; 
}
}); 
 });

以上所述是小编给大家介绍的BootStrap表单验证实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
js的2种继承方式详解
Mar 04 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
bootstrap滚动监控器使用方法解析
Jan 13 #Javascript
微信小程序 页面之间传参实例详解
Jan 13 #Javascript
bootstrap下拉菜单使用方法解析
Jan 13 #Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 #Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 #Javascript
You might like
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php生成mysql的数据字典
2016/07/07 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python实现简单的socket server实例
2015/04/29 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Python用户自定义异常的实现
2020/12/25 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
简单租房协议书
2014/04/09 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
先进事迹演讲稿
2014/09/01 职场文书
教师四风问题整改措施
2014/09/25 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
安全承诺书
2015/01/19 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书