bootstrap js表单验证框架是什么，如何用bootstrap js表单验证框架实现表单验证？

来源：蜘蛛抓取(WebSpider) 时间：2016-09-02 13:23 标签： bootstrap2 表单验证
插件描述：bootstrap表单验证
相关插件-验证
讨论这个项目（5）回答他人问题或分享插件使用方法奖励jQ币
这个怎么只能提交一次表单？在那修改？还有怎么代码下来完全没有格式
这个验证完了还走异步的方法。
ok，注意。
配合使用jquery-bootstrap的 select下拉框怎么没有效果？ & 其他组件都没问题
遇到相同问题，不知如何解决
PROMULGATOR
关注作者 (7)
收藏此插件 (42)
我当前jQ币余额：正在获取..
已下载次数：1064
所需jQ币：0基于Bootstrap jQuery.validate Form表单验证实践项目结构 ：github 上源码地址：/starzou/front-end-example1、form 表单代码[html]&!DOCTYPE html&
&title&Bootstrap Form Template&/title&
&meta charset="utf-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/&
&div class="container"&
&h1 class="text-center text-danger"&Form 示例&/h1&
&form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post"&
&div class="form-group"&
&label class="col-md-2 control-label" for="name"&Name&/label&
&div class="col-md-10"&
&input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" /&
&div class="form-group"&
&label class="col-md-2 control-label" for="exampleInputPassword1"&Password&/label&
&div class="col-md-10"&
&input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&
&div class="form-group"&
&label for="intro" class="control-label col-md-2"&Intro&/label&
&div class="col-md-10"&
&textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"&&/textarea&
&div class="form-group"&
&label class="control-label col-md-2"&Gender&/label&
&div class="col-md-10"&
&label class="radio-inline"&
&input type="radio" name="gender"
value="男" /&
boy &/label&
&label class="radio-inline"&
&input type="radio" name="gender"
value="女" /&
gril &/label&
&div class="form-group"&
&label for="hobby" class="control-label col-md-2"&Hobby&/label&
&div class="col-md-10"&
&div class="checkbox"&
&input type="checkbox" name="hobby" value="Music"&
Music&/label&
&div class="checkbox"&
&input type="checkbox" name="hobby" id="" value="Game" /&
Game &/label&
&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox1" value="option1"&
option1 &/label&
&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox2" value="option2"&
option3&/label&
&label class="checkbox-inline"&
&input type="checkbox" id="inlineCheckbox3" value="option3"&
option3 &/label&
&div class="form-group"&
&label for="sel" class="control-label col-md-2"&Select&/label&
&div class="col-md-10"&
&select multiple="" id="sel" name="sel" class="form-control"&
&option value="1"&1&/option&
&option value="2"&2&/option&
&option value="3"&3&/option&
&div class="form-group"&
&div class="col-md-offset-2 col-md-10"&
&button type="submit" class="btn btn-primary btn-sm"&
&button type="reset" class="btn btn-primary btn-sm"&
&script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"&&/script&
&script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"&&/script&
&script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"&&/script&
&script src="scripts/form.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript" charset="utf-8"&
MyValidator.init();
&/html&需要引用jquery.js，bootstrap.js，jquery.validate.js 库2、form.js 代码[javascript]var MyValidator = function() {
var handleSubmit = function() {
$('.form-horizontal').validate({
errorElement : 'span',
errorClass : 'help-block',
focusInvalid : false,
required : true
password : {
required : true
required : true
messages : {
required : "Username is required."
password : {
required : "Password is required."
required : "Intro is required."
highlight : function(element) {
$(element).closest('.form-group').addClass('has-error');
success : function(label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
errorPlacement : function(error, element) {
element.parent('div').append(error);
submitHandler : function(form) {
form.submit();
$('.form-horizontal input').keypress(function(e) {
if (e.which == 13) {
if ($('.form-horizontal').validate().form()) {
$('.form-horizontal').submit();
init : function() {
handleSubmit();
}();效果 ：相当不错的一个表单验证的特效，这里推荐给大家，小伙伴们自由美化下就可以用到自己项目中了。
这是我的文章签名，在自己的文章底部展示，支持UBB标签，自动识别URL 你也可以设置自己的文章签名哦，
如果您想留下此文，您可以将其发送至您的邮箱(将同时以邮件内容&PDF形式发送)
相关文章推荐
(Ctrl+Enter提交) &&
已有0人在此发表见解
&在& 00:00收藏到了
&&在信息爆炸的时代，您的知识需要整理，沉淀，积累！Lai18为您提供一个简单实用的文章整理收藏工具，在这里您可以收藏对您有用的技术文章，自由分门别类，在整理的过程中，用心梳理自己的知识！相信，用不了多久，您收藏整理的文章将是您一生的知识宝库！
· 蜀ICP备号-1

我要回帖

更多关于 bootstrap2 表单验证 的文章

 

随机推荐