首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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表单验证实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap表单验证实例代码

- Author -

前方太黑暗

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript几个易错点记录
Nov 26 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
Jul 05 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
vue实现表单录入小案例
Sep 27 Javascript
使用JS实现动态时钟
Mar 12 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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
模拟登录(1) 接口(1) Scheduled(1) router(1) 路由(1) 抽象类(1) 乱码(3) 扫雷(1) Date(1) 单向链表(1)
You might like
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
PHP安全配置
2006/10/09 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php的debug相关函数用法示例
2016/07/11 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
Python中的装饰器用法详解
2015/01/14 Python
Python机器学习算法之k均值聚类（k-means）
2018/02/23 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python学生信息管理系统（初级版）
2018/10/17 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python的faker库用法
2019/11/28 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
Python logging模块handlers用法详解
2020/08/14 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
创业计划实施的7大步骤
2014/02/05 职场文书
党员大会主持词
2014/04/02 职场文书
美容院员工规章制度
2015/08/05 职场文书
实习感想范文
2015/08/10 职场文书
iPhone13将有八大升级
2021/04/15 数码科技