bootstrap使用validate实现简单校验功能
本文实例为大家分享了bootstrapvalidate校验功能，供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>Bootstrap101Template</title>
<!--导包-->
<scriptsrc="../js/jquery-1.11.3.min.js"></script>
<scriptsrc="../js/bootstrap.min.js"></script>
<linkhref="../css/bootstrap.min.css"rel="stylesheet">
<scripttype="text/javascript"src="../js/jquery.validate.min.js"></script>
<!--校验-->
<script>
/*$(function(){
//校验
$("#f1").validate({
rules:{
username:{
required:true,
},
password:{
required:true,
rangelength:[6,16]
},
repassword:{
equalTo:$("input[name='password']")
}
},
messages:{
username:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
rangelength:[6,16]
},
repassword:{
equalTo:"两次密码不同哦"
}
}
});
})*/
//自定义校验
$(function(){
$.validator.addMethod("check",function(param,ele,value){
//获取到ele的爷节点
vare=ele.parentNode.parentNode;
//先判断输入是否正确
if(param!=null&¶m.length<=16&¶m.length>=6)
{
//当不为空,并且长度在6和16之间时代表输入正确,将颜色变为绿色的样式
//由于ele是JavaScript对象,所以如果要用jQuery的话需要包一下
//$(e).prop("class",$(e).prop("class")+"has-success");
//e.cclassName="form-group";
//将样式清空
$(e).prop("class","form-group");
//追加样式
e.className+="has-success";
returntrue;
}else{
//js方法将样式清空
e.setAttribute("class","form-group");
//$(e).prop("class","form-group");
//错误了,修改样式
e.className+="has-error";
//清空后还原样式
returnfalse;
}
})
$("#f1").validate({
rules:{
username:{
check:true,
},
password:{
check:true
},
repassword:{
equalTo:$("input[name='password']")
}
},
messages:{
username:{
check:"请输入用户名并且长度在6-16位之间"
},
password:{
check:"请输入密码并且长度在6-16位之间",
rangelength:[6,16]
},
repassword:{
equalTo:"两次密码不同哦"
}
}
})
})
</script>
<style>
/*提示的颜色*/
.form-group.error{
color:red;
}
</style>
</head>
<body>
<divclass="container">
<!--第一行-->
<divclass="row">
<divclass="col-sm-4"><imgsrc="../img/logo2.png"/></div>
<divclass="col-sm-4"><imgsrc="../img/header.png"></div>
<divclass="col-sm-4"style="margin-top:10px;">
<!--登录注册购物车-->
<ahref=""class="btnbtn-primary">登录</a>
<ahref=""class="btnbtn-primary">注册</a>
<ahref=""class="btnbtn-danger">购物车</a>
</div>
</div>
<!--第二行导航栏-->
<divclass="row">
<navclass="navbarnavbar-defaultnavbar-inverse">
<divclass="container-fluid">
<!--Brandandtogglegetgroupedforbettermobiledisplay-->
<divclass="navbar-header">
<buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false">
<spanclass="sr-only">Togglenavigation</span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
<spanclass="icon-bar"></span>
</button>
<aclass="navbar-brand"href="#">首页</a>
</div>
<!--Collectthenavlinks,forms,andothercontentfortoggling-->
<divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1">
<ulclass="navnavbar-nav">
<liclass="active"><ahref="#">手机数码<spanclass="sr-only">(current)</span></a></li>
<li><ahref="#">电脑办公</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown"role="button"aria-haspopup="true"aria-expanded="false">更多<spanclass="caret"></span></a>
<ulclass="dropdown-menu">
<li><ahref="#">电影</a></li>
<li><ahref="#">风云</a></li>
<li><ahref="#">你的名字</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">龙猫</a></li>
<lirole="separator"class="divider"></li>
<li><ahref="#">更多链接</a></li>
</ul>
</li>
</ul>
<formclass="navbar-formnavbar-right"role="search">
<divclass="form-group">
<inputtype="text"class="form-control"placeholder="Search">
</div>
<buttontype="submit"class="btnbtn-default">Submit</button>
</form>
</div><!--/.navbar-collapse-->
</div><!--/.container-fluid-->
</nav>
</div>
<!--banner注册主体-->
<divclass="row"style="background-image:url(../img/regist_bg.jpg);">
<divclass="col-sm-8col-sm-offset-2"style="border:7pxgainsborosolid;background-color:white;">
<divclass="row"style="margin-top:5px;">
<divclass="col-sm-offset-1"><ahref=""><b><fontsize="4">用户注册</font></b></a></div>
</div>
<divclass="row">
<divclass="col-sm-9col-sm-offset-1">
<formclass="form-horizontal"id="f1">
<divclass="form-group">
<labelfor="inputEmail3"class="col-sm-2control-label">用户名</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="username"name="username"placeholder="请输入用户名">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2control-label">密码</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="password"name="password"placeholder="请输入密码">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2control-label">确认密码</label>
<divclass="col-sm-10">
<inputtype="password"class="form-control"id="repassword"name="repassword"placeholder="请输入确认密码">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2control-label">Email</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="email"name="email"placeholder="请输入email">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2control-label">姓名</label>
<divclass="col-sm-10">
<inputtype="text"class="form-control"id="name"name="name"placeholder="请输入姓名">
</div>
</div>
<divclass="form-group">
<labelfor="inputPassword3"class="col-sm-2control-label">性别</label>
<divclass="col-sm-10"style="margin-top:5px;">
<inputtype="radio"checked="checked"id="man"name="man">男
<inputtype="radio"id="woman"name="woman">女
</div>
</div>
<divclass="form-group">
<divclass="col-sm-offset-2col-sm-10">
<buttontype="submit"class="btnbtn-danger">注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--底部-->
<divclass="row"style="margin-top:20px;">
<divclass="col-xs-12"><imgsrc="../img/footer.jpg"/width="100%"></div>
</div>
<!--联系我们-->
<divclass="row">
<divclass="col-xs-12text-center">
<ulclass="list-inline">
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
<li><ahref="#">关于我们</a></li>
</ul>
</div>
</div>
<!--版权信息-->
<divclass="row">
<divclass="col-xs-12text-center">
Copyright©2014-2017御影年华版权所有
</div>
</div>
</div>
</body>
</html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。