基于引导jQuery。验证表单表单验证实践项目结构：

开源代码库上源码地址：https://github。com/starzou/前端-示例

1、形式表单代码[html]

复制代码代码如下：DOCTYPE html html标题bootstrap Form Template/title meta charset=' utf-8 '/meta name=' viewport ' content=' width=device-width，initial-scale=1.0' link rel='样式表type=' text/CSS ' href=' plugins/bootstrap/CSS/bootstrap。CSS '/头体div class='容器' h1 class='文本-中心文本-危险'表单示例/h1 form role=' form ' class=' form-horizontal ' action=' JavaScript : alert('验证成功，可以提交。');方法=' 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 class=' form-group ' label class=' col-MD-2 control-label ' for=' exampleinputassword 1 ' Password/label div class=col-MD-10 '输入男/boy/label label class=' radio-inline '输入类型='radio '名称='gender '值='女/gril/label/div/div class=' form-group '标签为=' Hobby ' class=' control-label col-MD-2 ' Hobby/label div class=' col-MD-10 ' div class=' checkbox '标签输入类型='复选框'名称='爱好'值='音乐'音乐/标签/div class='复选框'标签输入类型='复选框'名称='爱好' id='值='游戏'/游戏/标签/div标签类='复选框-内嵌'输入类型='checkbox' id='inlineCheckbox1 '值=“选项1”选项1/label label class=' checkbox-inline '输入类型='复选框' id='选项2 '选项3/label/div class=' form-group '标签用于=' sel ' class=' control /脚本/正文/html

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

2、form.js代码[javascript]

复制代码代码如下： var MyValidator=function(){ var handleSubmit=function(){ $(').形式-水平')。验证({ error元素： ' span '、errorClass : 'help-block '、focusInvalid : false ),规则： { name : { required : true }、密码： {必选： true }、介绍： {必选： true })，消息3: {名称3: {必需的3: '用户名是必需的。},密码： {需要： '需要密码}，介绍： {必需： '需要intro '} }，突出显示：函数（元素){ $(元素)。最近的('。表单组')。addCLaSS(' has-error ')；}，成功：函数（标签){ label.closest ' .表单组')。remove CLaSS(' has-error ')；标签。移除()；}，错误位置：函数（错误，元素){ element.parent('div ').追加（错误);}，submitHandler :函数（表单){ form。submit()；} });$('."格式-水平输入")。按键（函数(e){ if(e . what==13){ if($(').形式-水平')。验证()。form()) { $(' .形式-水平')。submit()；}返回false } })；}返回{ init :函数(){ handleSubmit()；} };}();

效果：

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