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

基于Bootstrap jQuery.validate Form表单验证实践项目结构 ：

github 上源码地址：https://github.com/starzou/front-end-example

1、form 表单代码[html]

Form 示例

Name

Password

Intro

Gender

boy


gril

Hobby

Music

Game

option1


option3


option3

Select

1
2
3

Submit


Reset

需要引用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();
}
};
}();

效果 ：

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