基于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(); 
        } 
    }; 
}();

效果 ：

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

赞 (0)

相关推荐

  • jquery表单验证使用插件formValidator

    jquery表单验证使用插件formValidator

    1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo

  • jquery动态改变form属性提交表单

    有些情况下,同一个form在不同的情况下提交到不同的处理动作,可以在js中动态改变form的属性,满足不同条件的form提交需求. 如: 复制代码 代码如下: <form id="form" name="form" method="POST" enctype="multipart/form-data" action="action1.jsp" target="iframe">

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jQuery实现form表单reset按钮重置清空表单功能

    有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 复制代码 代码如下: <form> <input name="name1" /><br/> <input name="name1" /><br/> <textarea name="content"></textarea> <a href="javascript

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • jQuery EasyUI API 中文文档 - Form表单

    Form 表单 用法 复制代码 代码如下: <form id="ff" method="post"> ... </form> 使 form 成为 ajax 提交的 form . 复制代码 代码如下: $('#ff').form({ url:..., onSubmit: function(){ // 做某些检查 // 返回 false 来阻止提交 }, success:function(data){ alert(data) } }); // 提

  • jQuery Form插件使用详解_动力节点Java学院整理

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

  • jquery EasyUI的formatter格式化函数代码

    要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt').datagrid({ title:'Formatting Columns', width:550, height:250, url:'datagrid_data.json', columns:[[ {field:'itemid',title:'Item ID',width:80}, {field:'p

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

随机推荐