ronon77
ronon77

Bootstrap实现登录校验表单(带验证码)

       这个登陆窗口是双登陆窗口的，对IE8及早期版本不支持，可以根据自己的开发语言更换，我这个是asp的，其中的引用文件可以在网络上自行下载，如找不到可以留下邮箱~！

Bootstrap实现登录校验表单(带验证码)_第1张图片

关键代码如下所示：

  4. http-equiv="Content-Type"content="text/html; charset=utf-8"/>
  5. </span><span class="pln">scm登陆界面</span><span class="tag">
  6. type="text/css">
  7. body {
  8. background-color:#999;
  9. }
  11. rel="stylesheet"href="../bootstrap335/css/bootstrap.min.css">
  12. rel="stylesheet"href="../bootstrap335/css/bootstrapValidator.min.css">
  13. src="../bootstrap335/js/jquery-2.1.4.min.js">
  14. src="../bootstrap335/js/bootstrap.min.js">
  15. src="../bootstrap335/js/bootstrapValidator.min.js">
  16. <% 
  17. Response.Buffer=True 
  18. Response.ExpiresAbsolute=Now()-1 
  19. Response.Expires=0 
  20. Response.CacheControl="no-cache" 
  21. %>
  23. >
  25. class="col-lg-5 col-lg-offset-2">
  26. class="page-header"style="margin-top:5em;">

  27. ******管理系统
  • class="col-md-offset-4 col-md-4">
  • class="panel panel-primary"style="margin-top:3em;">
  • id="myTab"class="nav nav-tabs">
  • class="active">href="#Prv"data-toggle="tab">供应商登陆
  • href="#CPrv"data-toggle="tab">生产商登陆
  • id="myTabContent"class="tab-content"> 
  • class="tab-pane fade in active"id="Prv">
  • class="well well-sm ">class="panel-title">
  • 供应商登陆
  • class="panel-body">
  • name="LoginG"id="LoginG"action="Admin_ChkLogin_G.asp"method="post"target="_parent">
  • class="form-group">
  • class="input-group">
  • class="input-group-addon">账号
  • name="Username"type="text"class="form-control"placeholder="Username">
    • />
  • class="form-group">
  • class="input-group">
  • class="input-group-addon">密码
  • name="Password"type="Password"class="form-control"placeholder="Password">
    •  
    •  
  • 请将如下计算结果填入文本框内：
  • class="form-group form-horizontal">
  • class="col-lg-3 control-label "id="captchaOperation">
  • class="col-lg-9">
  • type="text"class="form-control "name="captcha"/>
    • />/>/> 
  • class="form-group">
  • class="btn btn-primary btn-block"type="submit"value="登　　录"/>
  • class="tab-pane fade"id="CPrv">
  • class="well well-sm">class="panel-title">
  • 生产商登陆
  • class="panel-body"> 
  • name="LoginS"id="LoginS"action="Admin_ChkLogin_S.asp"method="post"target="_parent">
  • class="form-group">
  • class="input-group">
  • class="input-group-addon">账号
  • name="Username2"type="text"class="form-control"placeholder="Username">
  • />
  • class="form-group">
  • class="input-group">
  • class="input-group-addon">密码
  • name="Password2"type="Password"class="form-control"placeholder="Password">
  •  
  •  
  • 请将如下计算结果填入文本框内：
  • class="form-group form-horizontal">
  • class="col-lg-3 control-label "id="captchaOperation2">
  • class="col-lg-9">
  • type="text"class="form-control "name="captcha2"/>
  • />/>/> 
  • class="form-group">
  • class="btn btn-primary btn-block"type="submit"value="登　　录"/>
  •  
  • type="text/javascript">
  • $(document).ready(function(){
  • // Generate a simple captcha
  • function randomNumber(min, max){
  • returnMath.floor(Math.random()*(max - min +1)+ min);
  • };
  • function generateCaptcha(){
  • $('#captchaOperation').html([randomNumber(1,50),'+', randomNumber(1,50),'='].join(' '));
  • };
  • generateCaptcha();
  • $('#LoginG')
  • .bootstrapValidator({
  • //message: 'This value is not valid',
  • feedbackIcons:{
  • valid:'glyphicon glyphicon-ok',
  • invalid:'glyphicon glyphicon-remove',
  • validating:'glyphicon glyphicon-refresh'
  • },
  • fields:{
  • Username:{
  • message:'The username is not valid',
  • validators:{
  • notEmpty:{
  • message:'供货商账户不能为空'
  • },
  • stringLength:{
  • min:5,
  • max:10,
  • message:'供货商账号长度 5-10'
  • },
  • /*remote: {
  • url: 'remote.php',
  • message: 'The username is not available'
  • },*/
  • regexp:{
  • regexp:/^[a-zA-Z0-9_\.]+$/,
  • message:'只接受数字和字母 '
  • }
  • }
  • },
  • Password:{
  • validators:{
  • notEmpty:{
  • message:'密码不能为空'
  • }
  • }
  • },
  • captcha:{
  • validators:{
  • callback:{
  • message:'验证码错误',
  • callback:function(value, validator){
  • var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0])+ parseInt(items[2]);
  • return value == sum;
  • }
  • }
  • }
  • }
  • }
  • })
  • .on('error.form.bv',function(e){
  • var $form = $(e.target),
  • bootstrapValidator = $form.data('bootstrapValidator');
  • if(!bootstrapValidator.isValidField('captcha')){
  • // The captcha is not valid
  • // Regenerate the captcha
  • generateCaptcha();
  • }
  • });
  • });
  • type="text/javascript">
  • $(document).ready(function(){
  • // Generate a simple captcha
  • function randomNumber(min, max){
  • returnMath.floor(Math.random()*(max - min +1)+ min);
  • };
  • function generateCaptcha(){
  • $('#captchaOperation2').html([randomNumber(1,50),'+', randomNumber(1,50),'='].join(' '));
  • };
  • generateCaptcha();
  • $('#LoginS')
  • .bootstrapValidator({
  • //message: 'This value is not valid',
  • feedbackIcons:{
  • valid:'glyphicon glyphicon-ok',
  • invalid:'glyphicon glyphicon-remove',
  • validating:'glyphicon glyphicon-refresh'
  • },
  • fields:{
  • Username2:{
  • message:'The username is not valid',
  • validators:{
  • notEmpty:{
  • message:'供货商账户不能为空'
  • },
  • stringLength:{
  • min:5,
  • max:10,
  • message:'供货商账号长度 5-10'
  • },
  • /*remote: {
  • url: 'remote.php',
  • message: 'The username is not available'
  • },*/
  • regexp:{
  • regexp:/^[a-zA-Z0-9_\.]+$/,
  • message:'只接受数字和字母 '
  • }
  • }
  • },
  • Password2:{
  • validators:{
  • notEmpty:{
  • message:'密码不能为空'
  • }
  • }
  • },
  • captcha2:{
  • validators:{
  • callback:{
  • message:'验证码错误',
  • callback:function(value, validator){
  • var items = $('#captchaOperation2').html().split(' '), sum = parseInt(items[0])+ parseInt(items[2]);
  • return value == sum;
  • }
  • }
  • }
  • }
  • }
  • })
  • .on('error.form.bv',function(e){
  • var $form = $(e.target),
  • bootstrapValidator = $form.data('bootstrapValidator');
  • if(!bootstrapValidator.isValidField('captcha')){
  • // The captcha is not valid
  • // Regenerate the captcha
  • generateCaptcha();
  • }
  • });
  • });

    • 你可能感兴趣的:(python&nodejs)

    • 解线性方程组 qiuwanchi
      package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
    • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
      在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
    • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
      Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
    • java面试题 Array_06 java面试
      java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
    • 网站加速 oloz 网站加速
      前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
    • 正确书写单例模式 随意而生 java 设计模式 单例
      　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
    • 单例模式 香水浓 java
      懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
    • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
      安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
    • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
      我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
    • mysql中查询生日提醒的日期相关的sql baalwolf mysql
      SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
    • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
      问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
    • Javascript Promise bijian1013 JavaScriptPromise
              Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
    • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
         Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
    • 【Java命令三】jstack bit1129 jstack
      jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
    • jboss 5.1启停脚本　动静分离部署 ronin47
      以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
    • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
        在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
    • 三色旗算法 bylijinnan java算法
      import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
    • 警告:No configuration found for the specified action: \'s chiangfai configuration
      1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
    • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
      使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
    • select into outfile access deny问题 daizj mysqltxt导出数据到文件
      本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
    • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
      <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
    • 美国电影超短200句 dcj3sjt126com 电影
      1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
    • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
          随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
    • Maven的settings.xml配置 geeksun settings.xml
      settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
    • ubuntu的init与系统服务设置 hongtoushizi ubuntu
      转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
    • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
      使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
    • php位运算符注意事项 home198979 位运算PHP&
      $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
    • Linux shell数组建立和使用技巧 pda158 linux
      1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
    • hotspot源码(JDK7) ol_beta javaHotSpotjvm
      源码结构图，方便理解：   ├─agent                            Serviceab
    • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
      基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他