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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
详解Angular 4.x Injector
May 04 Javascript
js上传图片预览的实现方法
May 09 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
Javascript的this详解
Mar 23 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 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
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
js命名空间写法示例
2015/12/18 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
计算机学生求职信范文
2014/01/30 职场文书
运动会入场词100字
2014/02/06 职场文书
写自荐信的注意事项
2014/03/09 职场文书
加油口号大全
2014/06/13 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
大学辅导员述职报告
2015/01/10 职场文书
安全保证书怎么写
2015/02/28 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2015年暑期见闻
2015/07/14 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
教学反思怎么写
2016/02/24 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers
MySql分区类型及创建分区的方法
2022/04/13 MySQL
MySQL池化框架学习接池自定义
2022/07/23 MySQL