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

作者:hebedich 时间:2024-05-13 09:06:57 

基于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表单验证

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

标签:Bootstrap,jQuery.validate,表单验证
0
投稿

猜你喜欢

  • Django中Forms的使用代码解析

    2022-03-20 08:06:56
  • XML正在接管Web服务 成为SOA的基础

    2008-09-05 17:21:00
  • Vue3兄弟组件传值之mitt的超详细讲解

    2023-07-02 16:56:04
  • Python数组定义方法

    2021-05-30 08:46:39
  • Python 匹配任意字符(包括换行符)的正则表达式写法

    2023-01-23 23:11:09
  • Python全局变量与局部变量区别及用法分析

    2021-01-24 07:35:21
  • python占位符输入方式实例

    2022-10-26 11:46:16
  • 基于事件冒泡、事件捕获和事件委托详解

    2024-04-28 09:43:33
  • Keras中的两种模型:Sequential和Model用法

    2021-10-16 07:04:32
  • 超详细注释之OpenCV操作图像平移转换

    2022-08-14 19:29:38
  • python实现域名系统(DNS)正向查询的方法

    2021-03-26 17:20:57
  • pycharm打包py项目为.exe可执行文件的两种方式

    2022-03-26 11:51:51
  • Python爬虫基础之XPath语法与lxml库的用法详解

    2022-07-03 20:56:06
  • Python全栈之文件函数和函数参数

    2023-05-11 02:28:21
  • 深入了解python的函数参数

    2023-07-24 08:19:01
  • Java实现基于JDBC操作mysql数据库的方法

    2024-01-27 04:54:17
  • JavaScript基础知识学习笔记

    2024-05-13 10:35:15
  • asp如何让服务器延时执行更改后的数据?

    2010-05-13 16:35:00
  • Go语言实现请求超时处理的方法总结

    2024-04-23 09:37:50
  • MySQL组合索引与最左匹配原则详解

    2024-01-24 18:28:16
  • asp之家 网络编程 m.aspxhome.com