BootStrap表单验证实例代码

2024-10-03 17:31:53

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+jQuery.validate实现Form表单验证

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
基于Bootstrap+jQuery.validate实现表单验证

这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的
jquery插件bootstrapValidator表单验证详解

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站. 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下BootstrapValidator的使用. 准备工作 BootstrapValidator文档地址:http://bv.doc.javake.cn/ 下载源码后,将其中的bootstrapValidator.min.css和bootstapVali
实用又漂亮的BootstrapValidator表单验证插件

本文推荐一款twitter做的bootstrapValidator.js,本身bootstrap就是twitter做的,那么使用原配的validator也就更值得信赖.从百度上搜bootstrapValidator会出现很多款,但我只推荐这款: 一.一睹为快为了简便的介绍,这里只做为空的check. BootstrapValidator官方下载地址二.资源引用下载完资源包后,你可以看到如下的目录. 然后把以下三个文件引入到你项目. <link type="text/css"
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

本文给大家介绍如何判断表单验证的实例代码,在没给大家介绍正文之前,先给大家介绍下插件. 插件介绍先上一个图: 下载地址:https://github.com/nghuuphuoc/bootstrapvalidator 使用提示中文化: 下载插件后,将\js\bootstrapValidator\language\zh_CN.js 引入文件,即实现中文化提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE h
JS组件Form表单验证神器BootstrapValidator

本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc
BootStrap表单验证实例代码

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 下面给大家分享bootstrap表单验证实例代码,具体代码如下所示: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@
AngularJs表单验证实例代码解析

常用的表单验证指令如下详情: 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.
第七篇Bootstrap表单布局实例代码详解(三种表单布局)

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码

在某些情况下,反馈图标未正确显示.默认情况下,Bootstrap定义反馈图标位置如下: .has-feedback .form-control-feedback { top: 25px; right: 0; } .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } 通过自定义值top和right属性,您可以将反馈图标调整为应有的位置. 按钮组 .btn-group .form-control-
Angular表单验证实例详解

表单验证我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht
bootstrap 表单验证使用方法

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do
纯JS实现表单验证实例

表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check
Bootstrap 表单验证formValidation 实现远程验证功能

最近项目用到了一个很强大的表单验证.记录下.官方地址:http://formvalidation.io/api/ 还有一点很重要:这个插件的Bootstrap最好用他们自带的,有点改动.不用再去Bootstrap官网下载. 向上效果: 先导入资源: <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" /> &l
js进行表单验证实例分析

本文实例讲述了js进行表单验证的方法.分享给大家供大家参考.具体实现方法如下: 1. 传统的表单验证代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
jQuery之简单的表单验证实例

html部分: <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label>  <input type="text" id="username&qu

BootStrap表单验证实例代码

相关推荐

随机推荐