基于Bootstrap+jQuery.validate实现Form表单验证


Posted in Javascript onDecember 16, 2014

基于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>  

        <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"/>  

    </head>  

    <body>  

        <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>  

                </div>  

                <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>  

                </div>  

                <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>  

                </div>  

                <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>  

                </div>  

                <div class="form-group">  

                    <label for="hobby" class="control-label col-md-2">Hobby</label>  

                    <div class="col-md-10">  

                        <div class="checkbox">  

                            <label>  

                                <input type="checkbox" name="hobby" value="Music">  

                                Music</label>  

                        </div>  

                        <div class="checkbox">  

                            <label>  

                                <input type="checkbox" name="hobby" id="" value="Game" />  

                                Game </label>  

                        </div>  

                        <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>  

                </div>  

                <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>  

                        </select>  

                    </div>  

                </div>  

                <div class="form-group">  

                    <div class="col-md-offset-2 col-md-10">  

                        <button type="submit" class="btn btn-primary btn-sm">  

                            Submit  

                        </button>  

                        <button type="reset" class="btn btn-primary btn-sm">  

                            Reset  

                        </button>  

                    </div>  

                </div>  

            </form>  

        </div>  

        <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();  

        </script>  

    </body>  

</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,  

            rules : {  

                name : {  

                    required : true  

                },  

                password : {  

                    required : true  

                },  

                intro : {  

                    required : true  

                }  

            },  

            messages : {  

                name : {  

                    required : "Username is required."  

                },  

                password : {  

                    required : "Password is required."  

                },  

                intro : {  

                    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();  

                }  

                return false;  

            }  

        });  

    }  

    return {  

        init : function() {  

            handleSubmit();  

        }  

    };  

}(); 

效果 :

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap+jQuery.validate实现Form表单验证

基于Bootstrap+jQuery.validate实现Form表单验证

相当不错的一个表单验证的特效,这里推荐给大家,小伙伴们自由美化下就可以用到自己项目中了。

Javascript 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
JS中Location使用详解
May 12 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 #Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 #Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 #Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 #Javascript
javascript抽象工厂模式详细说明
Dec 16 #Javascript
node.js中的fs.statSync方法使用说明
Dec 16 #Javascript
node.js中的fs.stat方法使用说明
Dec 16 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
Python 除法小技巧
2008/09/06 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
大一学生的职业生涯规划书范文
2014/01/19 职场文书
致共产党员倡议书
2014/04/16 职场文书
献爱心标语
2014/06/21 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
Python装饰器的练习题
2021/11/23 Python
tree shaking对打包体积优化及作用
2022/07/07 Java/Android