基于Bootstrap jQuery.validate Form表单验证实践项目结构 :
github 上源码地址:https://github.com/starzou/front-end-example
1、form 表单代码[html]
Bootstrap Form TemplateForm 示例
Name
Password
Intro
Gender
boy
gril
Hobby
Music
Game
option1
option3
option3
Select
1
2
3
Submit
Reset
MyValidator.init();
需要引用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();
}
};
}();
效果 :
相当不错的一个表单验证的特效,这里推荐给大家,小伙伴们自由美化下就可以用到自己项目中了。