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

jQuery 2018-12-30

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

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

1、form 表单代码[html]

代码如下:

Bootstrap Form Template <Meta name="viewport" content="width=device-width,initial-scale=1.0">

dio-inline"> boy dio-inline"> gril

Box"> Box" name="hobby" value="Music"> Music

Box"> Game

Box-inline"> Box" id="inlineCheckBox1" value="option1"> option1 Box-inline"> Box" id="inlineCheckBox2" value="option2"> option3 Box-inline"> Box" id="inlineCheckBox3" value="option3"> option3

需要引用jquery.js，bootstrap.js，jquery.validate.js 库

2、form.js 代码[javascript]

代码如下:

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

效果：