该博客分享了一个基于Bootstrap和jQuery的表单验证实践项目，提供了详细的代码实现和效果展示。通过引入相关js库，实现了表单字段的必填验证、错误提示以及回车提交等功能，适用于前端开发人员快速集成到自己的项目中。
基于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();
}
};
}();
效果 ：
相当不错的一个表单验证的特效，这里推荐给大家，小伙伴们自由美化下就可以用到自己项目中了。
1495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
