github 上源码地址:

依据Bootstrap+jQuery.validate完成Form表单验证,jquery提交form表单

轶事Bootstrap jQuery.validate Form表单验证试行项目布局 :

图片 1

github 上源码地址:

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

效果 :

图片 2

图片 3

图片 4

图片 5

一定不错的贰个表单验证的特效,这里推荐给大家,小友大家率性美化下就足以用到温馨项目中了。

基于Bootstrap jQuery.validate Form表单验证实行项目结构 : github
上源码地址:https…

Form 示例

内需引用jquery.js,bootstrap.js,jquery.validate.js 库

2、form.js 代码[javascript]

复制代码 代码如下:var MyValidator =
function(卡塔尔(英语:State of Qatar) { var handleSubmit = function(卡塔尔(قطر‎ { $.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.closest.addClass; }, success : function {
label.closest.removeClass; label.remove(卡塔尔(英语:State of Qatar); }, errorPlacement : function
{ element.parent; }, submitHandler : function; } }); $(‘.form-horizontal
input’卡塔尔国.keypress { if { if .validate { $.submit(卡塔尔(قطر‎; } return false; } }卡塔尔(قطر‎;
} return { init : function; } }; }(卡塔尔(英语:State of Qatar);

十分不错的一个表单验证的特效,这里推荐给大家,小友大家任意美化下就足以用到和睦项目中了。

1、form 表单代码[html]

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注