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 相关文章推荐
JS中confirm,alert,prompt函数区别分析
Jan 17 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
canvas绘制多边形
Feb 24 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 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
You might like
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
护士自我评价范文
2014/01/25 职场文书
环保建议书作文
2014/03/12 职场文书
团日活动总结书格式
2014/05/08 职场文书
努力学习保证书
2015/02/26 职场文书
求职信范文怎么写
2015/03/19 职场文书
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL