指引网

搜索

热门标签:

当前位置: 主页 > 网页制作 > WEB开发 >

BootStrap表单验证实例代码

来源:网络 作者:佚名 点击: 次时间:2017-07-19 00:19
[摘要] 下面给大家分享bootstrap表单验证实例代码，具体代码如下所示： 代码如下 复制代码 %@ page language=javacontentType=text/html; charset=UTF-8 pageEncoding=UTF-8% %@ include file=../include/taglib.jsp% !DOCTYPE html PUBLIC-/

下面给大家分享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">生&emsp;&emsp;日:</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">邮&emsp;&emsp;件:</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">密&emsp;&emsp;码:</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">语&emsp;&emsp;言:</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');

});

functionrandomNumber(min, max) {

     returnMath.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){

varitems = $('#callbackshow').html().split(' '),

sum = parseInt(items[0]) + parseInt(items[2]);

console.log(sum);

returnvalue == sum;

}

}

  }

},//end callbacktest

    }

  });

 

//表单提交

$("#formTest").submit(function(ev){ev.preventDefault();});

$("#submitBtn").on("click",function(){

varbootstrapValidator = $("#formTest").data('bootstrapValidator');

bootstrapValidator.validate();

if(bootstrapValidator.isValid()){

$.ajaxRequest({

url :'www.baidu.com',

  });

}else{

return;

}

});

 });

 
标签： 网页制作
相关内容
------分隔线----------------------------
[关闭窗口] [返回顶部]
栏目列表
推荐内容
热点内容

网站内容来自网络整理或网友投稿如有侵权行为请邮件:Rinchey@163.com 我们24小时内处理

CopyRight © 2006-2018 指引網 Ondex.Net , All Rights Reserved. 粤ICP备16026640号-1