基于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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
jQuery中:input选择器用法实例
Jan 03 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
JavaScript中的函数式编程详解
Aug 22 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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP微信分享开发详解
2017/01/14 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python 从attribute到property详解
2020/03/05 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python 如何在测试中使用 Mock
2021/03/01 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
最经典的商业地产项目广告词
2014/03/13 职场文书
教师节宣传方案
2014/05/23 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
2016年党建工作简报
2015/11/26 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
无线电通信名词解释
2022/02/18 无线电